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,实现锚点跳转功能: 有同学可能说可以直接用锚点跳转实现,是的,锚点跳转可以实现这个功能,但是有一个问题,点击跳转后,再点击返回,返回的是上次跳转的结果,具体的原理就不用多说了 ...
随机推荐
- dockfile构建自己的tomcat
touch Dockerfile 在Dockerfile中输入以下内容 FROM centosMAINTAINER Irish<3395327965@qq.com>#把宿主机当前上下文的 ...
- 跨域和CORS
一 跨域 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...
- dubbo中使用动态代理
dubbo的动态代理也是只能代理接口 源码入口在JavassistProxyFactory中 public class JavassistProxyFactory extends AbstractPr ...
- 【scratch3.0教程】1.2 下载安装scratch
第2课 下载安装Scratch 1 . 什么是Scratch? Scratch将程序语言设计成一块块积木,你只要用拖拉的方式,将程序积木 ...
- Js学习03--数据类型
一.数据类型 1.Js中常用的数据类型 简单数据类型 Number 数字类型 String 字符串类型 Boolean 布尔类型 Undefined 变量未初始化 Null 空类型 复杂数据 ...
- shiro源码解析
一.web.xml 文件中配置的 DelegatingFilterProxy 的 <filter-name>为啥与Spring文件中配置的ShiroFilterFactoryBean的Be ...
- Spring AOP 创建Advice 基于Annotation
public interface IHello { public void sayHello(String str); } public class Hello implements IHello { ...
- WebapiController的名字不能随便取名
在做webapi时候,遇到一个很坑的问题,就是新增一个控制器时,当新增加的控制器名称叫:AccountController.cs 自己测试,通过postman 访问 都没有问题,但是前端调用会报错,说 ...
- bat批处理删除多少天前的文件
@echo off ::演示:删除指定路径下指定天数之前(以文件的最后修改日期为准)的文件. ::如果演示结果无误,把del前面的echo去掉,即可实现真正删除. ::本例需要Win2003/Vist ...
- ZIP压缩与解压
/**//* * Gary Zhang -- cbcye@live.com * www.cbcye.com * www.quicklearn.cn * cbcye.cnblogs.com */ usi ...