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);        
    });
});

这里有一个fiddle来显示更多示例。

注意：JQuery具有数据方法，因此可以像这样拉动属性（如上所述）

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

或者像这样

$anchor.data('section-offset')

正如@Ben指出HTML5 specification for custom data attributes非常有用＆gt; 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标准，以便通过验证。对于exmaple <div id="linkToMe" data-scroll-offset="250">My content here</div>，然后使用@ chris的代码来抓取$anchor.attr('data-scroll-offset')之类的属性。

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

2 个答案: