Question

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

html {
 overflow: hidden;
}

然后我有一个导航栏，它有一个锚链接和一个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：

<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

根据您提供的信息，我无法重现您的问题。或者也许我不理解你的问题。

以下（我构建了您的代码）以您希望的方式运行。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
        html {overflow: hidden;}
        div#content {height: 1500px;}
        div#events {height: 500px;background-color: green;}
        div#jazz {height: 500px;background-color: red;}
        div#weddings {height: 500px;background-color: blue;}
    </style>
  </head>
  <body>
    <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>
  </body>
</html>

即使用户滚动到较低的内容，您是否打算将导航固定在窗口的顶部？如果是这样，请参阅此SMINT教程，了解如何使用粘性导航栏构建单页网站。然后给他买一杯咖啡：）

Answer 2

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

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

在这里演示http://jsfiddle.net/bvvhy6jj/

Answer 3

它不漂亮但可能会帮到你想要的地方

http://jsfiddle.net/maximhash/8ts7qzj3/

<ul id="nav">
  <li><a href="#events">Events</a></li>
  <li><a href="#jazz">Jazz</a></li>
  <li><a href="#weddings">Weddings</a></li>
</ul>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="content">
  <div id="events">Events</div>
  <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
  <div id="jazz">Jazz</div>
  <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
  <div id="weddings">Weddings</div>
  <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>


#nav{
    position: fixed;
    top: 0;
    z-index: 999;
    background: orange;
}
.content{
    position: relative;
    top: 10px;
    overflow: auto;
    height: 500px;
    display: block;
}

Answer 4

据我所知，您希望导航保持固定状态。因此，您必须将其设置为“固定”状态。：

ul {
   position:fixed;
}

单击锚链接会将整页移动到顶部

4 个答案: