JavaScript 将长页面滚动到锚点

JavaScript to scroll long page to anchor

本文关键字：滚动 JavaScript      更新时间：2023-09-26

我有一个页面，其中包含需要使用锚点的文档。HTML锚点不起作用，Javascript不起作用。我现在花了一些时间验证 w3 的标记，上次检查时没有错误。

我已经尝试过scrollToVisible，它抛出了未定义，所以我继续阅读var topPos = document.getElementById('anchor1').offsetTop;并使用它，没有错误，但它不会滚动。我还尝试使用window和一些随机滚动，以及来自 Mozilla 文档的window.scrollTo( 0, 700 );，但它不会进行滚动。然后我浏览了 HTML，并确保没有height:100% CSS 规则（没有）。

它不会做滚动的原因是什么？

测试页面内容

Lorem ipsum dolor sit amet...
... about 5 x 300 of lipsum ...
<div id="anchor1">
    Anchored. Lorem ipkjcdoeujrb...
</div>
<script>
    var topPos = document.getElementById('anchor1').offsetTop;
    // window.scrollTo(0, topPos);
    window.scrollTo(0, 800);
</script>

如果您想查看特定内容，请发表评论。

这是一个解决方案。

$('a[href^="#"]').on('click',function(e){
	e.preventDefault();
	var target = $(this).attr('href');
        $("html, body").animate({
  	    scrollTop: $(target).offset().top
        }, 400)
});
#top,#middle,#bottom{
  width: 100%;
}
#top{
  height: 1000px;
  background: #ccc;
}
#middle{
  height: 1000px;
  background: #f00;
}
#bottom{
  height: 1000px;
  background: #0f0;
}
.nav{
  position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li><a href="#top">Top</a></li>
    <li><a href="#middle">Middle</a></li>
    <li><a href="#bottom">Bottom</a></li>
  </ul>
</div>
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>

你不能

只做window.open（'#anchor1'，'_self'）吗？

相关文章：