除了一个特定的锚点，平滑滚动到锚点偏移像素？

Question

我有一个UL导航，我使用了这个平滑滚动的jQuery：

$(document).ready(function () {
$(document).on("scroll", onScroll);

//smoothscroll
$('a[href^="#"]').on('click', function (e) {
    e.preventDefault();
    $(document).off("scroll");

    $('a').each(function () {
        $('.nav').removeClass('active');
    })
    $('.nav').addClass('active');

    var target = this.hash,
        menu = target;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top-59
    }, 500, 'swing', function () {
        window.location.hash = target;
        $(document).on("scroll", onScroll);
    });
});
});

它向下移动了59像素，这是我需要的除一个锚点外的所有内容，是否可以添加一行代码，说“除了X类”或其他什么？我是Jquery新手 ;)

非常感谢您的帮助。

- Olly F

Answer 1

在您的点击事件中，您可以访问您点击的导航元素（this）和您要滚动到的目标（$target）。您可以查看其中任何一个以确定您需要偏移某个不同于-59的量。

如果您只有很少的情况需要有不同的偏移量，则可以这样做：

var offset = -59;
if ($(this).attr(href)=="#something") offset=-100; //or whatever special offset you need

并更改这一行：

'scrollTop': $target.offset().top-59

转换为：

'scrollTop': $target.offset().top+offset

如果您想要一种更加灵活的解决方案并且可以访问html，您可以在<a>或目标元素上设置数据属性，例如：

<a href="#something" data-scroll-offset=-100></a>

然后，类似于第一种方法：

var offset=-59;
if ($(this).attr("data-scroll-offset")!==null) offset=$(this).attr("data-scroll-offset");

如果它在目标元素上，则应该是$target而不是$(this)

---

如果要完全排除某个锚点，您可以从锚点选择器中删除它。而不是这样：

$('a[href^="#"]')

仅排除特定锚点，如下所示：

$('a[href^="#"]:not([href="#somethingBad"])')

或者像这样排除任何带有特定类别的锚点：

$('a[href^="#"]:not(.excludeMe)')

- Andy