锚点/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: ;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：点击导航跳到网页中的指定位置的更多相关文章
- html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码
一:通过html锚点实现滚动定位到页面指定位置(DIV): 如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...
- JavaScript获取html表单值验证后跳转网页中的关键点
关键代码: 1.表单部分 <form action="Depart.jsp" name="myform" method="post" ...
- jquery 跳转到当前页面指定位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html锚点 点击跳转到页面指定位置
本来是在看阮大神写的ajax教程,突然发现点击目录文字会跳转到相对应的文本内容,于是乎激发了我的兴趣. 这个究竟怎么做的,刚开始看的时候一知半解,找度娘就是:"点击跳转到页面指定位置&quo ...
- Bootstrap导航点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件jquery.singlePageNav.min.js
引入步骤: <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></scrip ...
- window.location.href问题，点击，跳转到首页
onClick="window.location.href='./';" 点击,跳转到首页. location.href=url Js中实现跳转 window.location.h ...
- 请问：关于织梦dedecms点击导航上的父栏目进去默认显示第一个子栏目的列表的问题
要设置织梦dedecms点击导航上的父栏目进去默认显示第一个子栏目的列表, 就按照如下图所示的方法进行操作,为什么 点击导航上的父栏目出现死循环呢, 根本浏览不了网页. 请各位大神指点指点,为什么点击 ...
- 导航跳转后保持选中状态 jquery高亮当前选中菜单
功能需求:今天在写一个站点需要用到在导航菜单点击链接跳转到新页面后,高亮当前菜单样式.简单的说,就是我点击导航菜单中的一个栏目,跳转到该栏目下,该栏目菜单也同时高亮(可以是背景色也可以是背景图片) 解 ...
- react-navigation的多次点击重复跳转同一页面、不在堆栈路由页面使用navigation方法的解决思路
一.react-navigation的初使用 createStackNavigator ==> createSwitchNavigator ==> createAppContaine ...
随机推荐
- 洛谷P2221 高速公路【线段树】
题目:https://www.luogu.org/problemnew/show/P2221 题意:有n个节点排成一条链,相邻节点之间有一条路. C u v val表示从u到v的路径上的每条边权值都加 ...
- Vue Router 使用方法
安装 直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 CDN 链接.上面的链接会一直指 ...
- Object.defineProperty 相关学习
Object.defineProperty 学习 描述: 方法直接在对象上定义一个新属性,或修改对象上的现有属性 并返回该对象.该方法允许精确地添加或修改对象上的属性: 语法: Object.de ...
- Moq练习
本文参考 http://www.cnblogs.com/haogj/archive/2011/06/24/2088788.html Moq适合于TDD的项目,小项目初期应该不太适合使用,有些浪费时间了 ...
- MongoDB 系统分析器
1.1 系统分析器作用 可以利用系统分析器(system profiler)来查找耗时过长的操作. 系统分析器可记录特殊集合system.profile中的操作,并提供大量有关耗时长的操作信息,但相应 ...
- 代码 | 用ALNS框架求解一个TSP问题 - 代码详解
写在前面 前面好多篇文章,我们总算是把整个ALNS的代码框架给大家说明白了.不知道大家对整个框架了解了没有.不过打铁要趁热,心急了要吃热豆腐.今天就来实战一下,教大家怎么用ALNS的代码框架,求解一个 ...
- 新路由3newifi3路由器刷机newifi3breed解锁小白刷机教程路由器刷breed老毛子Padavan固件
路由刷机围观33696次5条评论日期:2018-11-23字体:大中小 此教程只针对新三路由器小白玩家,大神勿喷,非常详细. 先说一下,本人2018年11月22日新入手了个新三路由器,收到货晚上8 ...
- WebSocket浅谈
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速 ...
- for循环实战性能优化
完成同样的功能,用不同的代码来实现,性能上可能会有比较大的差别,所以对于一些性能敏感的模块来说,对代码进行一定的优化还是很有必要的.今天就来说一下java代码优化的事情,今天主要聊一下对于for(wh ...
- 【SPOJ】Longest Common Substring
[SPOJ]Longest Common Substring 求两个字符串的最长公共子串 对一个串建好后缀自动机然后暴力跑一下 废话 讲一下怎么跑吧 从第一个字符开始遍历,遍历不到了再沿着\(pare ...