Question

我有这个Jquery

$(document).ready(function(){
    $(".mainNav a").bind('click.smoothscroll',function (e) {
        e.preventDefault();
        nav = $('.header').height() - 10;

        var target = this.hash,
        $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top-nav
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

这一切都很好，因为它的目标是我从wordpress菜单生成的所有链接，但问题是我不想要e.preventDefault（）;在/ blog链接上，因为这需要链接到另一个页面而不是链接到页面，我需要将它放在我的JQuery中，因为我无法添加通过WP生成的特定类itd，所以基本上如果它的#link阻止默认或反之亦然

<div class="mainNav">
  <nav>
    <ul>
      <li>
        <a href="#work">Our Work</a>
      </li>
      <li>
        <a href="#something">Something</a>
      </li>
      <li>
        <a href="/blog/">Blog</a>
      </li>
    </ul>
  </nav>
</div>

Answer 1

您可以查看链接是否以#开头：

http://jsfiddle.net/S9tTE/

$(document).ready(function(){
    $(".mainNav a").bind('click.smoothscroll',function (e) {
        if ($(this).attr('href').indexOf('#') != 0)
            return;

        e.preventDefault();
        console.log('prevented default');
    });
});

或者提供您想要滚动类的链接，并仅绑定到那些：

$(".mainNav a.scroll-link").bind('click.smoothscroll',function (e) {

或者提供您不想滚动类的链接，不要绑定到这些链接：

$(".mainNav a:not('.dont-scroll')").bind('click.smoothscroll',function (e) {

Answer 2

您可以在应用事件处理程序之前过滤锚点：

$('.mainNav a')
    .filter(function() {
        return this.getAttribute('href')[0] == '#';
    })
    .on('click.smoothscroll', function() ...

这仅选择href属性以“＃”开头的锚点。

Answer 3

似乎此代码适用于在用户单击页面上的本地锚标记时内部滚动文档。考虑到这一点，我建议使用略微修改的选择器来仅使用以id hash #开头的hrefs来定位锚标签：

$(document).ready(function(){
  $(".mainNav a[href^='#']").bind('click.smoothscroll',function (e) {
    ...
  });
});

防止列表中的一个链接接受e.preventDefault（）;

3 个答案: