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>

但问题是，标题固定在位置顶部。当我点击链接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());
}

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

1 个答案: