html - 单击 anchor 链接会将整个页面移动到顶部

Question

所以我有这个网页，其中隐藏了整个 html 的溢出

html {
 overflow: hidden;
}

然后我有一个带有 anchor 链接的导航栏和一个包含自动溢出内容的 div，因此它是可滚动的。

导航:

<ul>
  <li><a href="#events">Events</a></li>
  <li><a href="#jazz">Jazz</a></li>
  <li><a href="#weddings">Weddings</a></li>
</ul>

内容部分:

<div class="content">
  <div id="events">Events</div>
  // content
  <div id="jazz">Jazz</div>
  // content
  <div id="weddings">Weddings</div>
  // content
</div>

现在，我的问题是，当您单击导航上的链接时，例如爵士乐，整个页面都会转到顶部，所有内容:导航、div 内容，显然，div 显示爵士乐部分。有没有一种方法可以让一切都保持原样，而 div 内容框只滚动到某个部分？

谢谢!

Answer 1

只是让内容溢出:scroll;在这种情况下，滚动适用于 conteiner 而不是 html。

.content{
    /* */   
    overflow: scroll;
}

此处演示 http://jsfiddle.net/bvvhy6jj/