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

您并没有真正说明确定命名锚的 top 值的偏移量的规则。

因此，也许最简单的方法是引入一个属性，您可以使用该属性来调整命名锚点或您希望滚动到视图中的任何元素的偏移量。

例如，这里有一个命名锚点，它有一个名为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);        
    });
});

这是一个fiddle 以显示更多示例。

注意：JQuery 具有 data 方法，因此可以像这样（如上）拉出属性

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

或者像这样

$anchor.data('section-offset')

正如@Ben 指出的HTML5 specification for custom data attributes 非常有用> HTML 5 data- Attributes。

Answer 2

首先，您不需要使用旧的<a name= 约定。查看锚点HTML anchors on w3schools 上的 w3schools 页面。现在的最佳做法是通过 id 链接容器元素。

因此，如果您要链接到包含某些内容的 div，请使用 <div id="linkToMe">My content in here.</div> 和 <a href="#linkToMe">The link text</a>。

这当然会破坏您上面的代码，因为它正在按名称查找元素。您想通过 id 来查找它们（反正更快！）。

在我的网页中，我的顶部有一个工具栏，有时是position: fixed;，所以当我滚动时，我想偏移滚动位置，这样它就不会在页面顶部的工具栏下方。

这就是我的做法：

function goToByScroll(id) {
    //Find toolbar height
    var pageOffset = 0,
        hdr = $('#sub'),
        tb = $('#sitemenu');
    if (hdr.css('position') == 'fixed') { pageOffset += hdr.height() }
    if (tb.css('position') == 'fixed') { pageOffset += tb.height() }

    //Scroll the document
    $('html,body').animate({ scrollTop: $("#" + id).offset().top - pageOffset }, 'slow'); }

然后用 jQuery 连接起来：

$(".jumptoid").click(function (e) {
    e.preventDefault();

    // Track in google analytics if you are using it.
    _gaq.push(['_trackEvent', 'Jump to Id', e.currentTarget.host, this.href, 0]);

    // Scroll to item location using jquery
    goToByScroll(this.href.split('#')[1]);

    // Push History in browser bar so the forward/back button works
    window.location.hash = this.href.split('#')[1];

    return false;
});

如果目标元素的位置是固定的，这将使目标元素的顶部与我的标题/工具栏的底部完美对齐，如果不是，则与浏览器视口的顶部完美对齐。

在您的情况下，您要么想要更改计算偏移量的方式（而不是我的 hdr 和 tb 项目，您可以做一些其他数学运算或查看其他页面元素），或者您可以使用自定义@chris moutray 建议的属性。

如果要使用属性，请使用建议的以data- 开头的html5 标准，以便它通过验证。例如<div id="linkToMe" data-scroll-offset="250">My content here</div>，然后使用@chris 的代码来获取该属性，例如$anchor.attr('data-scroll-offset')。