今天做了一个简单的功能，页面往下滚动到一定位置，顶部出现一个浮动的导航栏，点击导航栏标签，下面页面跳转到相应的区域。回到顶部，导航栏隐藏。
因为顶部有一个浮动的导航栏，所以跳转到下面页面的时候，总是盖住一部分，顶部浮动DIV的高度占用。
最简单的解决办法就是给锚点加上个下面的样式：
anchor{ display: block; position: relative; top: -92px; visibility: hidden; }
示例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> *{margin: 0;padding: 0;} a{color:#000000; text-decoration:none;} .banner{height: 2rem;border: 1px solid #ccc;} .navTab{width:100%;height:1rem;line-height:1rem;font-size:.32rem;background:#fff;border-bottom:5px solid #EEEEEE;display: flex;flex-direction: row;white-space: nowrap;overflow-x: scroll;z-index: 99;} .navTab li{margin-left: 0.3rem;display: inline-block;} .navTab li.active a{padding-bottom:.1rem;color: #12318B;font-weight:bold;border-bottom: 1px solid #12318B;} .fixnav {position: fixed;top: 0; bottom: 0;width: 100%;height:1rem;overflow-x: scroll;overflow-y: hidden;z-index: 99;} .banner{width:7.5rem;height:3.75rem;} .top_title{margin:0.3rem 0.25rem 0;font-size:0.38rem;} .top_text{margin:0.1rem 0.25rem;font-size:0.26rem;line-height:.44rem;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 4;overflow: hidden;} .newslist{margin-top:.3rem;} .col_title{color:#12318B;font-size:.34rem;font-weight:bold;} .anchor{display: block;position: relative;top: -1rem;visibility: hidden;} </style> <title>专题列表</title> </head> <body> <div class="banner"></div> <div class="top_nav fixnav"> <div class="navTab"> <ul> <li class=""><a href="#0010bq008000000">开放日回</a></li> <li class=""><a href="#0010bq007000000">图文直播</a></li> <li class=""><a href="#0010bq005000000">分析评论</a></li> <li class=""><a href="#0010bq004000000">媒体报道</a></li> </ul> </div> </div> <div class="newslist" style="margin-top:1rem"> <div id="0010bq008000000" class="anchor"></div> <div class="col_title flex-row"><label class="title_Vline"></label>开放日回</div> <div class="TnList" style="height:5rem;">11</div> <div id="0010bq007000000" class="anchor"></div> <div class="col_title flex-row"><label class="title_Vline"></label>图文直播</div> <div class="TnList" style="height:5rem;">22</div> <div id="0010bq005000000" class="anchor"></div> <div class="col_title flex-row"><label class="title_Vline"></label>分析评论</div> <div class="TnList" style="height:5rem;">33</div> <div id="0010bq004000000" class="anchor"></div> <div class="col_title flex-row"><label class="title_Vline"></label>媒体报道</div> <div class="TnList" style="height:5rem;">44</div> </div> <script src="js/rem.js"></script> <script src=‘js/jquery1.10.2.min.js‘></script> <script src="template/build/template.js‘></script> <script > $(document).ready(function() { $(".top_nav").hide(); $(window).scroll(function() { if($(document).scrollTop() >= 200) { $(".top_nav").addClass("fixnav").slideDown(); } else { $(".top_nav").hide(); } }) $(".navTab li").click(function(){ var index = $(this).index(); console.log(‘点击了:‘+$(this).index()); $(this).addClass(‘active‘).siblings().removeClass(‘active‘); }) }); </script> </body> </html>
原文：https://www.cnblogs.com/joe235/p/11585577.html