锚点/JQ：点击导航跳到网页中的指定位置
今天做了一个简单的功能，页面往下滚动到一定位置，顶部出现一个浮动的导航栏，点击导航栏标签，下面页面跳转到相应的区域。回到顶部，导航栏隐藏。
因为顶部有一个浮动的导航栏，所以跳转到下面页面的时候，总是盖住一部分，顶部浮动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>
也可以js实现页面滚动，代码如下：
<!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;} .TnList{height:5rem;} </style> <title>专题列表</title> </head> <body> <div class="banner"></div> <div class="top_nav fixnav"> <div class="navTab" id="listColumn"> <ul> <li class="" ><a >开放日回</a></li> <li class="" ><a >图文直播</a></li> <li class="" ><a >分析评论</a></li> <li class="" ><a >媒体报道</a></li> </ul> </div> </div> <div class="newslist" id="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" type="text/javascript" charset="utf-8"></script> <script src="js/untils.js" type="text/javascript"></script> <script src="js/md5.js" type="text/javascript"></script> <script > $(document).ready(function() { var data = { column:[ {'subjectId':'0010bq008000000', 'subjectTitle':'开放日回'},{'subjectId':'0010bq007000000', 'subjectTitle':'图文直播'}, {'subjectId':'0010bq005000000', 'subjectTitle':'分析评论'},{'subjectId':'0010bq004000000', 'subjectTitle':'媒体报道'}, ], nlist:[ {'subjectId':'0010bq008000000', 'subjectTitle':'开放日回', articleData:[{'titleLong':'第一条'},{'titleLong':'第二条'},{'titleLong':'第三条'}]}, {'subjectId':'0010bq007000000', 'subjectTitle':'图文直播', articleData:[{'titleLong':'第一条'},{'titleLong':'第二条'},{'titleLong':'第三条'}]}, {'subjectId':'0010bq005000000', 'subjectTitle':'分析评论', articleData:[{'titleLong':'第一条'},{'titleLong':'第二条'},{'titleLong':'第三条'}]}, {'subjectId':'0010bq004000000', 'subjectTitle':'媒体报道', articleData:[{'titleLong':'第一条'},{'titleLong':'第二条'},{'titleLong':'第三条'}]}, ], }; $(".top_nav").hide(); $(window).scroll(function() { if($(document).scrollTop() >= 200) { $(".top_nav").addClass("fixnav").slideDown(); } else { $(".top_nav").hide(); } }) //Render('listColumn2', data, 'listColumn'); Render('list', data, 'newsList'); $(".navTab").on("click","li",function(){ $(this).addClass('active').siblings().removeClass('active');
var navIndex = $(this).index(); console.log(navIndex); console.log(data.nlist[navIndex].subjectId); var menuTypeId = "div[data-id" + data.nlist[navIndex].subjectId + "]"; console.log('.newslist ' + menuTypeId); $("html, body").animate({ scrollTop: $('.newslist ' + menuTypeId).offset().top}, {duration: 100,easing: "swing" });//scrollTop:指定相关模块回到指定位置（该位置要去掉菜单导航栏高度）。 }); }); </script> </body> </html>
注意一样名字的id只能有一个
