3

我尝试在同一页面中加载特定位置。所以我使用这段代码并且它的工作正常。这里是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>

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

请访问这个小提琴。你可以理解我想表达的意思。
感谢您的帮助。

4

1 回答 1

3

简单的方法：在“名称”元素上使用填充，以对抗标题。

见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());
}
于 2012-10-19T11:12:14.173 回答