Question

我有以下功能：

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

它从test中提取www.example.com/#test并将str设置为.test。但是，scrollTo（）会滚动到div <div class="test"></div>之后的div。那是为什么？

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

Answer 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>

可能已经完成了一个小提琴或CodePen项目，但你需要传递一些东西作为哈希（显然），并且尝试和这些编辑器进行模拟有点奇怪。只需将#something传递给该HTML文件即可完成您所要求的工作。

Answer 2

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

JQuery scrollTo滚动到下一个DIV

2 个答案: