今天做了一个简单的功能，页面往下滚动到一定位置，顶部出现一个浮动的导航栏，点击导航栏标签，下面页面跳转到相应的区域。回到顶部，导航栏隐藏。

因为顶部有一个浮动的导航栏，所以跳转到下面页面的时候，总是盖住一部分，顶部浮动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: ;padding: ;}

 a{color:#; text-decoration:none;}

 .banner{height: 2rem;border: 1px solid #ccc;}

.navTab{width:%;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: ;}

.navTab li{margin-left: .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: ; bottom: ;width: %;height:1rem;overflow-x: scroll;overflow-y: hidden;z-index: ;}

.banner{width:.5rem;height:.75rem;}

.top_title{margin:.3rem .25rem ;font-size:.38rem;}

.top_text{margin:.1rem .25rem;font-size:.26rem;line-height:.44rem;display: -webkit-box;-webkit-box-orient: vertical;

    -webkit-line-clamp: ;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;"></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;"></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;"></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;"></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() >= ) {

      $(".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只能有一个

锚点/JQ：点击导航跳到网页中的指定位置的更多相关文章

  1. html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  2. JavaScript获取html表单值验证后跳转网页中的关键点

    关键代码: 1.表单部分 <form action="Depart.jsp" name="myform" method="post" ...

  3. jquery 跳转到当前页面指定位置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. html锚点 点击跳转到页面指定位置

    本来是在看阮大神写的ajax教程,突然发现点击目录文字会跳转到相对应的文本内容,于是乎激发了我的兴趣. 这个究竟怎么做的,刚开始看的时候一知半解,找度娘就是:"点击跳转到页面指定位置&quo ...

  5. Bootstrap导航点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件jquery.singlePageNav.min.js

    引入步骤: <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></scrip ...

  6. window.location.href问题，点击，跳转到首页

    onClick="window.location.href='./';" 点击,跳转到首页. location.href=url Js中实现跳转 window.location.h ...

  7. 请问：关于织梦dedecms点击导航上的父栏目进去默认显示第一个子栏目的列表的问题

    要设置织梦dedecms点击导航上的父栏目进去默认显示第一个子栏目的列表, 就按照如下图所示的方法进行操作,为什么 点击导航上的父栏目出现死循环呢, 根本浏览不了网页. 请各位大神指点指点,为什么点击 ...

  8. 导航跳转后保持选中状态 jquery高亮当前选中菜单

    功能需求:今天在写一个站点需要用到在导航菜单点击链接跳转到新页面后,高亮当前菜单样式.简单的说,就是我点击导航菜单中的一个栏目,跳转到该栏目下,该栏目菜单也同时高亮(可以是背景色也可以是背景图片) 解 ...

  9. react-navigation的多次点击重复跳转同一页面、不在堆栈路由页面使用navigation方法的解决思路

    一.react-navigation的初使用 createStackNavigator  ==> createSwitchNavigator  ==>  createAppContaine ...

随机推荐

  1. redis 介绍与操作

    参考连接:  https://www.cnblogs.com/wupeiqi/articles/5132791.html redis 是什么? redis是一个软件,帮助开发者对一台机器的内存进行操作 ...

  2. Max Tree

    Description Given an integer array with no duplicates. A max tree building on this array is defined ...

  3. sqlserver内存、会话、连接查询

    1.连接查询 select * from sysprocesses where dbid in (select dbid from sysdatabases where name='dbname') ...

  4. PostgreSQL 数据目录结构

    根目录介绍 data ├── base # use to store database file(SELECT oid, datname FROM pg_database;) ├── global # ...

  5. sweiper做一个tab切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. pc页面自动缩放到手机端

    今天做了个pc的页面,看了别人的网站在手机端能把pc端的网页刚好缩放到手机端,看着很舒服. 于是想把自己的页面也这样搞一下,刚开始,想到的是利用css3的缩放来做,想的是当屏幕尺寸改变时缩放整个页面, ...

  7. ROS模拟

    亲测,在古月大大这篇博客中的一条命令最好改为rostopic pub /cmd_vel geometry/Twist -r 10 -- '[0.2,0,0]' '[0,0,0.5]'. http:// ...

  8. 前端代码规范-Javascript

    命名规范 ECMAScript 规范中标识符采用驼峰大小写格式,驼峰命名法由小(大)写字母开始,后续每个单词首字母都大写.根据首字母是否大写,分为两种方式: Pascal Case 大驼峰式命名法:首 ...

  9. Hadoop（3）如何构建HDFS--HA,YARN---HA

    什么是HA? HA的意思是High Availability高可用,指当当前工作中的机器宕机后,会自动处理这个异常,并将工作无缝地转移到其他备用机器上去,以来保证服务的高可用. HA方式安装部署才是最 ...

  10. Tkinter 之MessageBox弹出框

    一.参数说明 语法 作用 截图 tk.messagebox.showwarning(title='提示', message='你确定要删除吗?') 警告信息弹窗   tk.messagebox.sho ...