0

我有以下功能：

function scrollToDiv(){
    var str = '.' + window.location.href.split('#').pop();
    $.scrollTo(str, {duration: 300});
}

它提取testfromwww.example.com/#test并设置strto .test。但是， scrollTo() 滚动到 div AFTER <div class="test"></div>。这是为什么？

更新：我注意到 offset().top 为每个 div 显示错误的数字。

4

2 回答 2

1

这是一个不必要的复杂功能。有一个名为的属性window.location.hash可以获取您想要的确切部分（即使您的代码的那部分工作得很好）。您的代码的类似且更有效的实现是：

function scrollToAnchor(place){
    var cls = window.location.hash.replace("#", "."),
        sel = $(cls + ":eq(" + place + ")");
    place++;                
    $.scrollTo(sel, {duration: 300});
}

我添加了一个place滚动到给定位置的参数（索引为 1 而不是 0，因为我增加了变量以使其更易于理解）。请注意，我只是将hash属性值中的井号替换为点，因为这正是您所需要的。我希望这对您有所帮助，如果您不理解我的更改，请告诉我。这是使用此函数的完整 HTML 页面：

<!doctype html>
<html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="https://raw.github.com/flesler/jquery.scrollTo/master/jquery.scrollTo.min.js" type="text/javascript"></script>
    <style type="text/css">
    #something {
        display: block;
        margin-top: 800px;
    }
    </style>
    </head>
    <body>
        <a class="something">Test</a>
        <a class="something">Test</a>
        <a class="something">Test</a>
        <a class="something">Test</a>
        <a class="something">Test</a>
        <script type="text/javascript">
        function scrollToAnchor(place){
            var cls = window.location.hash.replace("#", "."),
                sel = $(cls + ":eq(" + place + ")");
            place++;                
            $.scrollTo(sel, {duration: 300});
        }
        scrollToAnchor(3);
        </script>
    </body>
</html>

可能已经完成了 Fiddle 或 CodePen 项目，但是您需要将某些内容作为散列传递（显然），尝试使用类似的编辑器进行模拟有点奇怪。只需传递#something给该 HTML 文件，它就会执行您想要的操作。

于 2013-10-13T15:19:13.230 回答
0

滚动到行为通常由浏览器默认在 ID 上执行。因此，当您单击http://example.com/#test 之类的任何链接时，任何体面的浏览器都会滚动到具有 id - test 的元素。尝试使用 id 而不是类。

于 2013-10-13T15:09:22.467 回答