6

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

由于设计原因，我不能让锚点直接卡到页面顶部。我不得不创建隐藏在页面上方的锚点，这样它就不会完全贴合到顶部。

这是我目前使用的脚本：

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 调整这个顶部 - [变量]？

4

2 回答 2

6

您并没有真正说明确定命名锚的最高值的偏移量的规则是什么。

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

因此，例如，这是一个命名锚点，带有一个名为的新属性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 具有 data 方法，因此可以像这样提取属性（如上）

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

或者像这样

$anchor.data('section-offset')

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

于 2012-08-20T12:38:59.220 回答
2

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

因此，如果您要链接到包含某些内容的 div，请使用<div id="linkToMe">My content in here.</div>and <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 建议的自定义属性。

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

于 2012-08-20T19:48:29.347 回答