jQuery脚本平滑滚动到具有不同偏移的不同部分

Question

我正在为我的单页网站使用平滑的滚动脚本.它滚动到每个锚点.

由于设计原因,我无法将锚点直接拖到页面顶部.我不得不创建隐藏在页面上方的锚点,因此它不会精确地捕捉到顶部.

这是我目前使用的脚本:

jQuery(document).ready(function($) {
    $(".scroll").click(function(event){ 
        event.preventDefault();
        $('html,body').animate({
            scrollTop: $('[name="' + this.hash.substring(1) + '"]').offset().top
        }, 500);
    });
});

我被告知我可以在此脚本中进行偏移.我可以简单地在顶部添加一些东西来抵消一定数量的像素,而不是将这些隐藏的锚点放在任何地方.这将是前250 -

$('html,body').animate({
    scrollTop:$('[name="' + this.hash.substring(1) + '"]').offset().top - 250
}, 500);

问题是这会使偏移总是250px,我需要它是可变的,例如,投资组合div可以锚定200px的偏移,但联系div只有50px.

任何人都可以帮我写一些选择器到脚本中,这将允许我调整这个顶部 - [变量]基于哪个div被锚定？

Answer 1

你并没有真正说明确定命名锚点最高值的偏移量的规则.

因此,最简单的方法是引入一个属性,您可以使用该属性来调整命名锚点上的偏移量或者您想要滚动到视图中的任何元素.

所以例如这里是一个带有新属性的命名锚点,data-section-offset我希望偏移 20px.

<a id="myAnchor" data-section-offset="20">My Section</a>

在单击处理程序中,您可以提取动画的属性值.

jQuery(document).ready(function($) {

    $(".scroll").click(function(event) {
        event.preventDefault();        
        var $anchor = $('#' + this.hash.substring(1));
        $('html,body').animate({ 
            scrollTop: $anchor.offset().top - $anchor.attr('data-section-offset')
        }, 500);        
    });
});

这是一个显示进一步示例的小提琴.

注意:JQuery具有数据方法,因此可以像这样拉出属性(如上所述)

$anchor.attr('data-section-offset')

或者像这样

$anchor.data('section-offset')

正如@Ben所指出的,自定义数据属性的HTML5规范非常有用> HTML 5数据 - 属性.