HTML锚加Javascript脚本滚动

我有一个可怕的时间编码应该是一个非常简单的序列。当我点击“转到第2部分”时，我希望它转到锚点，然后垂直滚动给定量（这里是50px）。所以，会发生什么，它会将锚点放在页面顶部，但它不会执行额外的调整滚动。为了看到这一点，你必须用很多文字填充两个段落块。HTML锚加Javascript脚本滚动

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

来源

2015-02-24 Almiron

使用超时为“scrollxy”功能尝试...可能发生的事情是它同时在做两件事。 – 2015-02-24 16:55:21

的问题是，你的onClick功能被锚滚动之前调用了下来。你必须dalay为了脚本执行把它的工作：

 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

来源

2015-02-24 17:10:06 nanndoj

谢谢，Nanndoj！增加10毫秒的时间延迟解决了这个问题。但是，我有一个问题需要注意：为什么函数定义必须位于setTimeout定义中。为什么当我按照下面的方式编写它时，滚动功能不起作用，这在直观和概念上更清洁？函数scrollxy（dx，dy）{ \t window.scrollBy（dx，dy）; \t window.setTimeout（“scrollxy（）”，10） } – Almiron 2015-02-25 14:50:41

例如：想象一下滚动位于位置0，锚点位于500.单击函数'scrollxy'将首先执行（到位置50），然后浏览器将执行默认锚点行为（转到锚点位置500）。当我们用'setTimeout'延迟执行时，默认的浏览器行为将被执行（到位置500），然后'scrolxy'将在稍后被调用（到位置550） – nanndoj 2015-02-25 14:53:55

我想这个提琴可以回答你评论中的问题http： //jsfiddle.net/j9xy5v1g/ – nanndoj 2015-02-25 15:06:19

HTML锚加Javascript脚本滚动

回答

相关问题