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

因为顶部有一个浮动的导航栏，所以跳转到下面页面的时候，总是盖住一部分，顶部浮动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. SQL SERVER PIVOT使用

    参照这个网址介绍 http://www.cnblogs.com/lwhkdash/archive/2012/06/26/2562979.html 一般SQL Server的函数都会识别为紫色,可是PI ...

  2. 关于request.getServletPath()，request.getContextPath()的总结

    1. getServletPath():获取能够与“url-pattern”中匹配的路径,注意是完全匹配的部分,*的部分不包括. 2.getContextPath():获取项目的根路径

  3. 2-set 1823: [JSOI2010]满汉全席

    这个题告诉我变量循环使用,一定要赋好初值!!!!!! 一定要赋好初值!!!!!!一定要赋好初值!!!!!!一定要赋好初值!!!!!! #include<iostream>#include& ...

  4. 2019ICPC南京自我反省

    第一场ICPC,跟第一场CCPC一样,可惜真的可惜. 打完比赛就感觉难受,难受不在于又抱了块铜牌,而是那种能出的题没出的可惜感非常浓重. 开场还是可以的,通过一阵讨论,就大胆猜测了A的规律,然后一发过 ...

  5. 在其他博客里看到的比较好的map用法，进行储存啦啦~ x

    1.map简介 map是一类关联式容器.它的特点是增加和删除节点对迭代器的影响很小,除了那个操作节点,对其他的节点都没有什么影响.对于迭代器来说,可以修改实值,而不能修改key. 2.map的功能 自 ...

  6. 去掉BigDecimal类型变量小数点后多余的零

           业务背景:mysql中A表中的B字段的类型是decimal类型,小数位数是三位,某一条数据的值是3000000,在Java中查询出来的结果是3000000.000,这样显示在页面中不太好 ...

  7. Java学习日记基础篇（九) —— 集合框架，泛型，异常

    集合框架 有事我们会需要一个能够动态的调整大小的数组,比如说要添加新员工但是数组已经满了,并且数组的大小是在定义的时候定死的,所以我们就需要一个能够动态调整大小的数组或者用链表解决,而java中提供了 ...

  8. StrictMode 详解

    StrictMode类是Android 2.3 (API 9)引入的一个工具类,可以用来帮助开发者发现代码中的一些不规范的问题.比如,如果你在UI线程中进行了网络或者磁盘操作,StrictMode就会 ...

  9. Homebrew 使用国内镜像

    在国内的网络环境下使用 Homebrew 安装软件的过程中,可能会长时间卡在 Updating Homebrew ... 方法一:按command + c 取消本次更新操作,直接安装软件 方法二:设置 ...

  10. Java项目开发

    项目开发整体构建: MVC+DAO设计模式 用面向对象的方式理解和使用数据库,一个数据库对应一个java项目 数据库--项目 表--类 字段--属性 表中的一条数据--类的一个对象 M:模型层 Jav ...