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

因为顶部有一个浮动的导航栏，所以跳转到下面页面的时候，总是盖住一部分，顶部浮动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. Spring核心概念和案例

    一.Spring概念 1.Spring框架概述 轻量级的Java EE开源框架,它是由Rod Johnson为了解决企业应用程序开发的复杂性而创建, Spring框架提供了一个开发平台,用于整合其他技 ...

  2. SpringMVC使用ResponseEntity实现文件下载，及图片base64的字节数组上传于下载

    本文主要通过ResponseEntity<byte[]>实现文件下 该类实现响应头.文件数据(以字节存储).状态封装在一起交给浏览器处理以实现浏览器的文件下载. ResponseEntit ...

  3. 运行级别 runlevel

    linux默认有7个等级,从0到6 0 关机 1 单用户模式,系统出现问题是可使用该模式进入系统.例如完了root密码,就可以使用1进入系统修改root密码 2 多用户模式,没有网络连接 3 完全多用 ...

  4. leetcode解题报告（20）：Rotate Array

    描述 Rotate an array of n elements to the right by k steps. For example, with n = 7 and k = 3, the arr ...

  5. 【luogu1251】餐巾计划问题--网络流建模，费用流

    题目描述 一个餐厅在相继的 N 天里,每天需用的餐巾数不尽相同.假设第 iii 天需要 ri​块餐巾( i=1,2,...,N).餐厅可以购买新的餐巾,每块餐巾的费用为 p 分;或者把旧餐巾送到快洗部 ...

  6. 【优化算法】变邻域搜索算法解决0-1背包问题(Knapsack Problem)代码实例 已

    01 前言 经过小编这几天冒着挂科的风险,日日修炼,终于赶在考试周中又给大家更新了一篇干货文章.关于用变邻域搜索解决0-1背包问题的代码.怎样,大家有没有很感动? 02 什么是0-1背包问题? 0-1 ...

  7. thinkphp5/php cors跨域处理

    现在做项目,很多都是前后端分离.也就是前段,后端都有自己的域名. 那么前段请求后端接口的时候,就会出现跨域问题.出现跨域的问题,主要 是浏览器的安全策略-同源策略.那么怎么解决跨域问题呢,抛出主角 C ...

  8. YII框架的类自动加载机制

    YII之所以能实现快速的自动加载类文件,是因为它通过两种途径来实现. 先看文件 vendor\yiisoft\yii2\BaseYii.php 里面的 autoload 方法 public stati ...

  9. idea出现Error configuring application listener of class org.springframework.web.context.ContextLoader

    在IDEA中写spring mvc时出现Error configuring application listener of class org.springframework.web.context. ...

  10. CentOS 6.5系统中mysql数据库还原后出现无法读表

    图形化工具还原提示如下: 命令行输入 mysql> use netmanage;  Database changed  mysql> show tables;  ERROR 1018 (H ...