HTML锚加Javascript滚动

HTML Anchor Plus Javascript Scroll

本文关键字：滚动 Javascript 锚加 HTML      更新时间：2024-04-19

我在编写本应非常简单的序列时遇到了麻烦。当我点击"转到第2节"时，我希望它转到锚点，然后垂直滚动给定的量（此处为50px）。因此，它将锚点放在页面顶部，但不执行额外的调整滚动。为了看到这一点，你必须用大量的文本填充两个段落块。

<html>
    <head>
        <script>
            function scrollxy(dx,dy) { 
                window.scrollBy(dx,dy); 
            }
        </script>
    </head>
    <body>
        <p><a href="#anchor2" onClick="scrollxy(0,-50);">Go to Section 2</a></p>
        <h2>Section 1</h2>
        <p>Lots of text ...</p>
        <a id="anchor2"></a> 
        <h2>Section 2</h2>
        <p>Lots of text ...</p>
    </body>
</html>

问题是在锚点向下滚动之前调用了onClick函数。你必须拖延脚本的执行才能让它发挥作用：

       function scrollxy(dx,dy) { 
            setTimeout(function() {
               window.scrollBy(dx,dy);
            }, 10);
        }

和

    <p><a href="#anchor2" onClick="scrollxy(0,50);">Go to Section 2</a></p>

这是一个FIDDLE

相关文章：