html - 如何链接到页面中的特定点

Question

我尝试在同一页面中加载特定位置。所以我使用这段代码并且它工作正常。这里是JSFIDDLE .

<div class="header">This is Header</div>
<div id="nav" class="clearfix">
<a href="#headline1">1</a>
<a href="#headline2">2</a>
<a href="#headline3">3</a>
<a href="#headline4">4</a>
</div>
<div class="section">
<h1><a name="headline1">Headline One</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>

<div class="section">
<h1><a name="headline2">Headline Two</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>

<div class="section">
<h1><a name="headline3">Headline Three</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>

<div class="section">
<h1><a name="headline4">Headline Four</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>

但问题是，header 固定在 top 位置。当我单击链接 1 时，Headline one 返回标题。所以 h1 内容不显示。

请访问此Fiddle .你可以理解我想说的。
感谢您的帮助。

Answer 1

简单的方法:在“name”元素上使用填充来抵消标题。

参见 http://jsfiddle.net/sAdK5/3/

.section h1 a {
    display:block;
    padding-top:100px;
}

---

更复杂的方法:将所有内容放在一个 div 容器中并使用 CSS 创建内联滚动。

---

您也可以使用 jQuery 添加额外的滚动。

参见:http://jsfiddle.net/sAdK5/11/

我们所做的是，在#content 区域内创建滚动条，并测量窗口的高度，减去标题 - 并在每次调整窗口大小时调用它。

$(document).ready(function(){  
   resizeContent();
  //attach on resize event
   $(window).resize(function() {
       resizeContent();
    });
});
function resizeContent()
{
  //#content height equals window height minus .header height
   $('#content').css('height', $(window).height() - $('.header').height());
}