Fatal编程技术网

HTML锚加Javascript滚动

javascript html

HTML锚加Javascript滚动,javascript,html,Javascript,Html,我在编写一个非常简单的序列时遇到了麻烦。当我单击“转到第2节”时，我希望它转到锚，然后垂直滚动给定的数量（此处为50px）。因此，发生的情况是，它将锚放在页面顶部，但不执行额外的调整滚动。为了看到这一点，您必须用大量文本填充两个段落块 <html> <head> <script> function scrollxy(dx,dy) { window.scrollBy(dx,dy);

我在编写一个非常简单的序列时遇到了麻烦。当我单击“转到第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>


函数x（dx，dy）{
滚动窗口（dx，dy）；
}


第一节
大量的文本

第二节
大量的文本
问题是在锚定向下滚动之前调用了
onClick
函数。您必须延迟脚本执行以使其正常工作：

       function scrollxy(dx,dy) { 
            setTimeout(function() {
               window.scrollBy(dx,dy);
            }, 10);
        }
及
下面是一个

尝试使用“scrollxy”函数的超时。。。可能发生的是它同时在做这两件事。谢谢你，Nanndoj！增加10毫秒的延时可以解决这个问题。但是，我有一个问题要问你：为什么函数定义必须在setTimeout定义中。为什么当我把滚动函数写在下面时它不工作，这在直觉上和概念上都更清晰？函数scrollxy（dx，dy）{window.scrollBy（dx，dy）；window.setTimeout（“scrollxy（）”，10）}示例：假设scroll位于位置0，锚定位于500。单击功能
scrollxy
将首先执行（转到位置50），然后浏览器将执行默认定位行为（转到定位位置500）。当我们使用
setTimeout
延迟执行时，将执行默认的浏览器行为（转到位置500），然后稍后调用
scrolxy
（转到位置550）。我猜这把小提琴回答了您评论中的问题 
    <p><a href="#anchor2" onClick="scrollxy(0,50);">Go to Section 2</a></p>