JavaScript滚动长页面以锚定

Question

我有一个包含文档的页面，我需要在其中使用 anchor 。 HTML anchor 不起作用，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>

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

Answer 1

这是一个解决方案。

$('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>