jQuery实现分章节锚点回到顶部效果

PHP中文网 • 2025年3月8日 12:07:43 • 编程技术 • 阅读 2

这次给大家带来jQuery实现分章节锚点回到顶部效果，jQuery实现分章节锚点回到顶部的注意事项有哪些，下面就是实战案例，一起来看一下。

这里演示基于jquery实现的分章节动画实现“回到顶部”的效果，可通过网页顶部的数字序号直接进入网页的章节，当处于第二章节的时候，网页右侧会显示竖排的控制按钮，点击按钮会回到相应章节，其实也就是定义好的锚点，当然也可回到顶部，网页上见到的回顶部大多不是这个样子，所以本款效果还挺新颖。

运行效果截图如下：

具体代码如下：

jQuery锚点带动画跳转特效.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;}/* reset */body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p , form, fieldset, legend, input, button, textarea, th, td { margin:0; padding:0;}table { border-collapse:collapse; border-spacing:0;}fieldset, img { border:0;}ul,li { list-style:none;}body { background: #f1f1f1; color: #666; font:12px/1.7 Helvetica,Arial,Tahoma,sans-serif,"B8BF53";}.row:after { clear:both; content:'0'; display:block; height:0;}.row { zoom:1;}/*链接颜色*/a,button{outline:none; /*移除虚线框 IE8,FF有用*/ hide-focus: expression(this.hideFocus=true); /*IE6、IE7*/}a{ color:#999; text-decoration:none;}a:hover{ color:#be0000; text-decoration: underline;}.fst{ font-family: "B8BF53";}h1,h2,h3,h4,h5,h6{font-family:FAE8F6F96C59ED1; font-size: 16px;}/* end reset */.row{ width:1000px; margin:0 auto;}/*模板头部，所有专题页面公用*/.index_nav{width:575px; height: 70px; margin: 0 auto; padding-left: 5px; background: #fff;}.index_nav li{width: 115px; height: 70px; float: left;}.index_nav li a{display: block; float: left; width: 70px;height: 70px; background:url(images/index_nav.gif) 0 0 no-repeat; text-align: center; color: #e02800;}.index_nav li a i{display: block; padding-top: 12px; height: 22px; line-height: 22px;}.index_nav li a strong{font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 24px; display: block; height: 30px; line-height: 20px;}.index_nav li a:hover{background-position: 0 -70px; color: #fff; text-decoration: none;}.h15{height: 15px; overflow: hidden;}.mainpage{width: 1000px; height:1000px;}h2{font-size: 24px; text-align: center; color: #333; font-weight: bold;}.mainpage p{width: 650px; margin: 0 auto; color: #fff; font-size: 16px; padding: 50px 0 50px;}.mainpage1{background: #fe6400;}.mainpage2{background: #be0000;}.mainpage3{background: #ccc;}.mainpage4{background: #0093dd;}.mainpage5{background: #a8cf33;}*html{background-image:url(about:blank);background-attachment:fixed;}/*低版本浏览器防止抖动的，必须有*/#tbox{width:30px; height:200px; float:right; position:fixed; display: none;_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));_margin-bottom:50px;}/*这个只能改宽高其他的不要修改，需要滚动的内容都要放在这个p里面*/.taoba{display:block; background:#c2c2c2; width:30px; height:30px; margin-bottom:4px;text-align: center; color: #fff; line-height: 30px; overflow: hidden;cursor:pointer}.taoba:hover{background:#ff4200; text-decoration: none; color: #fff;}#gotop{display:block; width:30px; height:30px; text-indent:-9999px; overflow: hidden; color: #fff; background:url(images/top_icon.gif) no-repeat; position:absolute; display:none; cursor:pointer} /*这个样式随便改，必须有position:absolute; */#gotop:hover{background-position: 0 -30px;} jQuery(document).ready(function($) { $(".index_nav li a").click(function(event) {   var index=this.title  var id='#'+'index_'+index  $("html,body").animate({scrollTop: $(id).offset().top}, 1000); }); $(".taoba").click(function(event) {   var index=this.title  var id='#'+'index_'+index  $("html,body").animate({scrollTop: $(id).offset().top}, 1000); }); function a(x,y){ l = $('#main').offset().left; w = $('#main').width(); $('#tbox').css('left',(l + w + x) + 'px'); $('#tbox').css('bottom',y + 'px');}//获取#tbox的p距浏览器底部和页面内容区域右侧的距离函数#main为页面的可视宽度$(function() {  $(window).scroll(function(){ t = $(document).scrollTop(); if(t>500){  $('#tbox').show(); }else{  $('#tbox').hide(); } if(t > 50){  $('#gotop').fadeIn('slow'); }else{  $('#gotop').fadeOut('slow'); }  })  a(10,100);//#tbox的p距浏览器底部和页面内容区域右侧的距离 $('#gotop').click(function(){   $('body,html').animate({   scrollTop: 0  },  800);//点击回到顶部按钮，缓懂回到顶部,数字越小越快  return false;  })}); }); 
 活动1
 活动2
 活动3
 活动4
 活动5
 
 
这是第一个活动页
 
 
这是第二个活动页
 
 
这是第三个活动页
 
这是第四个活动页
 
 
这是第五个活动页
 
 1 2 3 4 5 回到顶部