jquery锚点跳转
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
ul{
position: fixed;
left: 0;
top: 30%;
}
li{
height: 40px;
line-height: 40px;
list-style: none;
width: 100px;
text-align: center;
background: #f01;
color: #ffffff;
cursor:pointer;
}
a{
color: #ffffff;
text-decoration: none;
}
#a1{background: #fff;border: 1px solid #ddd;
height: 900px;
width: 90%;
margin-left: 10%;
}
#a2{background: #fff;border: 1px solid #ddd;
height: 900px;
width: 90%;
margin-left: 10%;
}
#a3{background: #fff;border: 1px solid #ddd;
height: 900px;
width: 90%;
margin-left: 10%;
}
#a4{background: #fff;border: 1px solid #ddd;
height: 900px;
width: 90%;
margin-left: 10%;
}
#a5{background: #fff;border: 1px solid #ddd;
height: 900px;
width: 90%;
margin-left: 10%;
}
.active{
background: #ddd;
}
.active>a{
color: #000;
}
#LouDao{
display: none;
}
#main{
overflow: hidden;
}
</style>
</head>
<body>
<ul id="LouDao">
<li><a>第一章</a></li>
<li><a>第二章</a></li>
<li><a>第三章</a></li>
<li><a>第四章</a></li>
<li><a>第五章</a></li>
</ul>
<div style="height:300px;"></div>
<div id="main">
<div id="a1">1 这是一个悲惨的故事</div>
<div id="a2">2 这是一个欢快的故事</div>
<div id="a3">3 这是一个伤心的故事</div>
<div id="a4">4 这是一个幸福的故事</div>
<div id="a5">5 这是一个狗血的故事</div>
</div>
<footer>
<div style="height: 900px;width: 100%">底部</div>
</footer>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var daohang=$("#LouDao");//楼层标签
var li=$("#LouDao>li");//获取目录li
var main=$("#main>div");//文章主要内容
$(window).scroll(function() {
//获取到页面总高度
var HeightAll = $("html,body").height();
//获取滚动条位置
var iTop = $(window).scrollTop(); for(var i=0;i<main.length;i++){
//楼层的显示和隐藏
if(iTop>=main[0].offsetTop){
daohang.show();
}else{
daohang.hide();
};
//楼层的联动
var num=0;
for(var i=0;i<main.length;i++){
if(iTop>=(main[i].offsetTop)-100){
num=i;
}
li[i].className='';//设置li中的class为空
//main[i].style.padding='35px 0 0 0';
};
li[num].className='active';
//main[num].style.padding='65px 0 0 0';
for(var i=0;i<li.length;i++){
li[i].onclick=function(){
for(var j=0;j<li.length;j++){
if(this==li[j]){
console.log(li[j]);
var t = main.eq($(this).index()).offset().top;
console.log(t);
//alert(t);
//$(".louti").addClass("ommm");
$("html,body").animate({
//scrollTop:main[j].offsetTop
"scrollTop": t-100
},500); }
}
}
} }
});
</script>
</html>
jquery锚点跳转的更多相关文章
- jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作） 经典
1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...
- jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作）
JQuery下锚点的平滑跳转 对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用. 例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置 如下: $( ...
- jQuery任意标签锚点跳转插件
// 任意锚点平滑跳转插件// 2010-07-15 v1.0(function($){ $.fn.zxxAnchor = function(options){ var defaults = { ie ...
- jQuery实现锚点跳转（就一行代码）
/* 锚点跳转 */ function anchor(p,fn) { $("html,body").animate({ scrollTop: $("#" + p ...
- 各种HTML锚点跳转方式
1 js控制锚点跳转 <a name="anchor"></a> location.hash="anchor"; 不只有a其他元素也可以 ...
- html锚点的作用和js选项卡锚点跳转的使用
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...
- a 锚点跳转滑动效果
点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...
- HTML meta锚点跳转 小tips
小tips meta锚点跳转 http://www.zhangxinxu.com/wordpress/2015/03/meta-http-equiv-refresh-content/
- zepto的scrollTo，实现锚点跳转
实现功能:点击右侧字母A,实现锚点跳转功能: 有同学可能说可以直接用锚点跳转实现,是的,锚点跳转可以实现这个功能,但是有一个问题,点击跳转后,再点击返回,返回的是上次跳转的结果,具体的原理就不用多说了 ...
随机推荐
- 《TCP/IP - TCP/UDP》
一:概述 - 由于 IP 的传输是无状态的,IP 提供尽力服务,但并不保证数据可以到达主机. - 所以,数据的完整性需要更上层的 传输层来保证.TCP和UDP 均属于 传输层. 二:UDP - 特点 ...
- 《Redis 分布式锁》
一:什么是分布式锁. - 通俗来说的话,就是在分布式架构的redis中,使用锁. 二:分布式锁的使用选择. - 当 Redis 的使用场景不多,而且也只是单个在用的时候,可以构建自己使用的 锁. - ...
- hive学习(1)
什么是Hive Hive是基于Hadoop的一个数据仓库工具(E抽取T转换L加载),可以将结构化的数据文件映射为一张表,并提供类SQL查询功能. 本质是:将HQL转化成MapReduce程序 Hive ...
- python 之 Django框架(Django框架简介、视图装饰器、request对象、Response对象)
12.33 Django框架简介: MVC,全名是Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器( ...
- Linux基础系统优化（二）
SELinux功能 SELinux(Security-Enhanced Linux) 是美国国家安全局(NSA)对于强制访问控制的实现,这个功能管理员又爱又恨,大多数生产环境也是关闭的做法,安全手段使 ...
- PAT(B) 1085 PAT单位排行（Java：20分）
题目链接:1085 PAT单位排行 (25 point(s)) 题目描述 每次 PAT 考试结束后,考试中心都会发布一个考生单位排行榜.本题就请你实现这个功能. 输入格式 输入第一行给出一个正整数 N ...
- 深度学习-语言处理特征提取 Word2Vec笔记
Word2Vec的主要目的适用于词的特征提取,然后我们就可以用LSTM等神经网络对这些特征进行训练. 由于机器学习无法直接对文本信息进行有效的处理,机器学习只对数字,向量,多维数组敏感,所以在进行文本 ...
- Unity - Profiler参数详解
CPU Usage ● GC Alloc - 记录了游戏运行时代码产生的堆内存分配.这会导致ManagedHeap增大,加速GC的到来.我们要尽可能避免不必要的堆内存分配,同时注意:1 ...
- node.js开发 npm包管理工具 npm 和 cnpm区别
npm 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用 np ...
- js编写日历的思路
首先写出一个日历我们需要考虑以下2个问题: 每个月的总天数 每个月的第一天周几 这里提供了一个判断平年闰年2月份天数的方法: function leapYear(year) { return (yea ...