JQuery 滚动到滚动到下一个 DIV

JQuery scrollTo scrolls to the next DIV

本文关键字：滚动 DIV 下一个 JQuery      更新时间：2023-09-26

我有以下函数：

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

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

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

这是一个不必要的复杂函数。有一个名为 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文件，它就会完成您的需求。

默认情况下，

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

相关文章：