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

因为顶部有一个浮动的导航栏，所以跳转到下面页面的时候，总是盖住一部分，顶部浮动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. 简述 CGI、FastCGI和php-FPM的区别

    1.CGI是联系webserver 跟php解析器的一个桥梁 2.FastCGI是CGI改良的版本 3.php-FPM 是FastCGI 的进程管理器

  2. Centos7 安装相关软件

    1.安装 wget : yum -y install wget

  3. 二十.Nginx反向代理、Nginx的TCP/UDP调度器、Nginx常见问题处理

    proxy client web1 web2 1.nginx反向代理   使用Nginx实现Web反向代理功能,实现如下功能:   后端Web服务器两台(web1 192.168.2.100 web2 ...

  4. TensorFlow(七)：tensorboard网络执行

    # MNIST数据集 手写数字 import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data # ...

  5. Gluon学习03-基础数据类型Ndarray

    Gluon学习03-基础数据类型Ndarray 小书匠 kindle  目录,方便快速定位: 1.安装cuda与cudnn 2.安装mxnet-gpu 本机环境介绍: 系统:Linuxmint Pyt ...

  6. UOJ450 【集训队作业2018】复读机【生成函数】

    题目链接:UOJ EI神仙加强版 既然这题模数是今天日期减去\(7\times 10^5\),那就要赶紧把这题做了. 首先肯定是考虑指数型生成函数,列出来之后使用单位根反演一波. \[\begin{a ...

  7. wepy小程序项目

    # 安装(更新) wepy 命令行工具. cnpm install wepy-cli -g # 安装依赖包 cnpm install # 开发实时编译. npm run dev WePY开发文档参考 ...

  8. PHP全栈学习笔记27

    数组概述,类型,声明,遍历,输出,获取数组中最后一个元素,删除重复数组,获取数组中指定元素的键值,排序,将数组中的元素合成字符串. 数组概述,数组是存储,管理和操作一组变量. 数组类型为一维数组,二维 ...

  9. 开源是个巨大的坑，谁来帮帮我 - smartmontools 虐我记

    最近在试用smartmontools,感觉还行,于是乎想找来源码改改试试,这下可好,掉坑里了.呜呜呜... smartmontools的源码在这里可以看到:https://www.smartmonto ...

  10. Java学习日记基础篇（八) —— 二进制、位运算、位移运算

    二进制 二进制是逢2进位的进位置,0,1是基本算符 原码反码补码 在基本数据类型那里,有详细解释 二进制的最高位数是符号位:0表示整数,1表示负数 正数的原码,反码,补码都一样 负数的反码 = 它的原 ...