页面跳转

原文链接https://codepen.io/anon/pen/bKRdNd

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

<div id="header">
This is header with fixed position!
<div id="nav">
<span><a href="#section1_anchor">瞬移至区域1</a></span><span><a href="#section2_anchor">瞬移至区域2</a></span><span><a href="#section3_anchor">瞬移至区域3</a></span>
</div>
<button id="reset">重置</button><button id="avoidContentHidden">正文不被遮盖</button><button id="linkSolution1">准确定位1</button>
</div>
<div id="content" class="">
<a class="anchor" id="section1_anchor"></a>
<div id="section1" class="section">
<h3>区域1</h3>
<br/>
对于页面首部使用position:fixed的场景（保持首部滚动过程中始终出现在可视区），将导致首部之下的页面正文内容Content部分内容(即为本demo的first section中高度为header高度的部分)被header遮盖。
若不对content做特殊处理，该部分内容将被遮盖在header之下。
</div>
<a class="anchor" id="section2_anchor"></a>
<div id="section2" class="section">
<h3>区域2</h3>
<p>
对于页面首部使用position:fixed的场景（保持首部滚动过程中始终出现在可视区），将导致首部之下的页面正文内容Content部分内容(即为本demo的first section中高度为header高度的部分)被header遮盖。
</p>
如果仅仅是为了使页面正文Content不被遮盖，为content加一个margin-top为header高度即可。请点击“正文不被遮盖”按钮查看效果。
<p style="color: red; font-weight: bolder;"><em>问题解决了吗？ NO！</em></p>
接下来点击页面首部导航标签“区域1”或者“区域2”，期待的效果是页面滑动，相应区域进入可视区，但实际效果是：区域内容同样被header覆盖而不可见。
<h3>如何解决在这种场景下，页面内标签跳转正确定位的问题</h3>
<p>方案1：
<pre><code>
html:
在页面html中需要锚定的位置(可以有任意多个）插入锚点a，锚点拥有id和class，比如id="content" class="anchor_fixed"

增加样式:
.anchor_fixed{
display: block;
position: relative;
top: -120px; /*首部元素高度*/
visibility: hidden;
}

通俗地讲：增加一个不可见锚点元素，令其在锚点跳转时处于页面顶部，但因为该不可见的锚点元素通过相对定位向前偏移了一定高度，使得真正要展示的元素在锚点元素之后，因为该高度而避开了header的遮盖。完成上述配置后，可以实现大多数情况下的锚点跳转修正。那什么情况下的跳转做不到呢?

如果第一个锚点元素之前没有其他元素（或者有其他元素但这些元素所占高度小于header的高度），此时通过该方案仍然会出现被遮盖的情况，此时需要对方案进行略微优化：
布局上紧跟着header之后的元素，增加一个margin-top属性，其高度为header的高度。在本demo中，header之后的首个元素是content，我们为content增加该样式：
margin-top: 120px;
</code></pre>
</p>
<p>
点击”准确定位1“按钮，查看效果
</p>
</div>
<a class="anchor" id="section3_anchor"></a>
<div id="section3" class="section">
<h3>区域3</h3>
<p>这是一个纯打酱油的区域！</p>
</div>
<div id='nomeans' style="min-height: 300px; background-color: white;">
<p>饰演群众角色的元素,给酱油党区域3提供验证锚点功能正确的机会哟！</p>
<p>遗留待分析的问题： 1、 区域间的空白是怎么来的？ 2、区域与首部的宽度不一致</p>
</div>
</div>
<div id="footer"></div>

#header {
height: 120px;
100%;
position: fixed;
top: 0;
left: 0;

background-color: #722873;
text-align: center;
font-size: 2.1rem;
line-height: 30px;
color: white;
}

#nav {
margin-top: 10px;
}

#nav span {
font-size: 1.2rem;
padding: 0 10px;
}

#nav span:hover {
background-color: #888;
}

#header span a {
text-decoration: none;
color: white;

}

.section {
background-color: #ccc;
min-height: 300px;
}

/*核心样式*/
.anchor_fixed{
display: block;
position: relative;
top: -120px; /*首部元素高度*/
visibility: hidden;
}

#header button {
margin: 0 10px;
}
#section1 {
background-color: #999;
}

#section2 {
background-color: #bbb;
}

#section3 {
background-color: #eee;
}

/*
核心样式
使header之后的元素被遮盖，
此外，也避免过于靠前的元素在通过锚点跳转时仍然出现遮盖的情况*/
.avoidContentHidden {
margin-top: 120px;
}

js

$(document).ready(function(){
$("#reset").click(reset);
$("#avoidContentHidden").click(avoidContentHidden);
$("#linkSolution1").click(linkSolution1);
});
function reset() {
location.reload();
}

function avoidContentHidden () {
$("#content").addClass("avoidContentHidden");
}

function linkSolution1 (){
$(".anchor").addClass("anchor_fixed");
$("#content").addClass("avoidContentHidden")
}