jQuery实现分章节锚点“回到顶部”动画特效代码


Posted in Javascript onOctober 23, 2015

本文实例讲述了jQuery实现分章节锚点“回到顶部”动画特效。分享给大家供大家参考,具体如下:

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

运行效果截图如下:

jQuery实现分章节锚点“回到顶部”动画特效代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery锚点带动画跳转特效</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<style>
.gray {
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 filter: grayscale(100%);
 filter: gray;
}
/* reset */
body, div, 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,"\5B8B\4F53";
}
.row:after {
 clear:both;
 content:'\0020';
 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: "\5B8B\4F53";
}
h1,h2,h3,h4,h5,h6{font-family:\5FAE\8F6F\96C5\9ED1; 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;
}/*这个只能改宽高其他的不要修改,需要滚动的内容都要放在这个div里面*/
.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;}
</style>
<script type="text/javascript">
 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的div距浏览器底部和页面内容区域右侧的距离函数#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的div距浏览器底部和页面内容区域右侧的距离
 $('#gotop').click(function(){ 
  $('body,html').animate({
   scrollTop: 0
  },
  800);//点击回到顶部按钮,缓懂回到顶部,数字越小越快
  return false; 
 })
});
 });
</script>
</head>
<body>
<div class="indexnav_wrap">
 <ul class="index_nav">
 <li><a href="javascript:void(0)" title="1"><i>活动</i><strong>1</strong></a></li>
 <li><a href="javascript:void(0)" title="2"><i>活动</i><strong>2</strong></a></li>
 <li><a href="javascript:void(0)" title="3"><i>活动</i><strong>3</strong></a></li>
 <li><a href="javascript:void(0)" title="4"><i>活动</i><strong>4</strong></a></li>
 <li><a href="javascript:void(0)" title="5"><i>活动</i><strong>5</strong></a></li>
 </ul>
</div>
<div class="h50"></div>
<div class="row" id="main">
 <h2 id="index_1">这是第一个活动页</h2>
 <div class="mainpage mainpage1"></div>
</div>
<div class="h15"></div>
<div class="row">
 <h2 id="index_2">这是第二个活动页</h2>
 <div class="mainpage mainpage2"></div>
</div>
<div class="h15"></div>
<div class="row">
 <h2 id="index_3">这是第三个活动页</h2>
<div class="mainpage mainpage3"></div>
</div>
<div class="h15"></div>
<div class="row">
 <h2 id="index_4">这是第四个活动页</h2>
 <div class="mainpage mainpage4"></div>
</div>
<div class="h15"></div>
<div class="row">
 <h2 id="index_5">这是第五个活动页</h2>
 <div class="mainpage mainpage5"></div>
</div>
<div id="tbox"><!-- 这个必须有 id="tbox"-->
 <a class="taoba" href="javascript:void(0)" title="1">1</a>
 <a class="taoba" href="javascript:void(0)" title="2">2</a>
 <a class="taoba" href="javascript:void(0)" title="3">3</a>
 <a class="taoba" href="javascript:void(0)" title="4">4</a>
 <a class="taoba" href="javascript:void(0)" title="5">5</a>
 <a id="gotop" href="javascript:void(0)" title="回到顶部">回到顶部</a> <!-- 这个也是id="gotop" -->
</div>
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
javascript常用的方法整理
Aug 20 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
手写Node静态资源服务器的实现方法
Mar 20 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 #Javascript
深入浅析javascript立即执行函数
Oct 23 #Javascript
js判断手机号运营商的方法
Oct 23 #Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 #Javascript
js计算文本框输入的字符数
Oct 23 #Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 #Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 #Javascript
You might like
利用js调用后台php进行数据处理原码
2006/10/09 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
php中上传文件的的解决方案
2018/09/25 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
python中函数传参详解
2016/07/03 Python
python自定义异常实例详解
2017/07/11 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python中p-value的实现方式
2019/12/16 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
利用python进行文件操作
2020/12/04 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
P/Invoke是什么
2015/07/31 面试题
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2014年党小组工作总结
2014/12/20 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
通过Python把学姐照片做成拼图游戏
2022/02/15 Python