<!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锚点跳转
原文地址：https://www.cnblogs.com/li-sir/p/8856351.html