Question

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

我已经尝试scrollToVisible，它未定义，所以我继续阅读var topPos = document.getElementById('anchor1').offsetTop;并使用它，没有错误，但它不会做滚动。我还尝试使用window和一些随机滚动，以及来自mozilla docs的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>

Answer 2

你不能只做window.open（'＃anchor1'，'_ self'）？

用于滚动长页以锚定

2 个答案: