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,实现锚点跳转功能: 有同学可能说可以直接用锚点跳转实现,是的,锚点跳转可以实现这个功能,但是有一个问题,点击跳转后,再点击返回,返回的是上次跳转的结果,具体的原理就不用多说了 ...
随机推荐
- [IOT] - Raspbian Buster 设置固定 IP
背景 Raspberry Pi 4 + Raspbian Buster 配置步骤 1. 打开文件 "/etc/dhcpcd.conf" 进行配置. 2. 有线网卡配置固定IP in ...
- springboot2.1.8使用poi导出数据生成excel(.xlsx)文件
前言:在实际开发中经常需要将数据库的数据导出成excel文件,poi方式则是其中一种较为常用的导出框架.简单读取excel文件在之前的一篇有说明 本项目实现需求:user发出一个导出student信息 ...
- 函数的学习2——返回值&传递列表——参考Python编程从入门到实践
返回值 函数并非总是直接显示输出,相反,它可以处理一些数据,并返回一个或一组值.函数的返回值被称为返回值. 1. 简单的返回值 def get_formatted_name(first_name, l ...
- 【LEETCODE】43、1002. Find Common Characters
package y2019.Algorithm.array; import java.util.*; /** * @ProjectName: cutter-point * @Package: y201 ...
- Winform 快速开发框架,上位机开发,工控机程序开发,CS程序开发
1.当客户让你做个CS程序时,当你手上一穷二白,所有都要重复造轮,你是不是很烦. 2.但如果有一个通用的,快速开发框架,就可以把你从这些基础的工作解救出来,你专注做业务就好了. 3.本人其中一个项目的 ...
- JavaScript Web API 全选反选案例
全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...
- quartz2.3.0(十五)执行、暂停、继续执行、清除,花式操作数据库中持久化的job任务
#################################################################################################### ...
- SpringICO和DI区别
学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家 ...
- angularjs 文件下载 并 从response header中获取文件名
最近在做一个下载文件的功能,后台接口给的是二进制流的方式,那么前端要把二进制流下载下来. 这个过程使用$http的get请求,使用Blob接收,倒是没有难度,主要是遇到了,后台的文件名拿不到 的问题. ...
- C++线程同步与互斥总结
互斥:当多个线程访问同一个全局变量,或者同一个资源(比如打印机)的时候,需要进行线程间的互斥操作来保证访问的安全性. 临界区.互斥体.事件和信号量都可以实现线程互斥.但如果仅仅需要实现互斥功能,推荐前 ...