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 相关文章推荐
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
angular.js实现购物车功能
Oct 23 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
JavaScrip数组去重操作实例小结
Jun 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
php ci框架验证码实例分析
2013/06/26 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Python中list初始化方法示例
2016/09/18 Python
Python 串口读写的实现方法
2019/06/12 Python
python动态视频下载器的实现方法
2019/09/16 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
python re模块常见用法例举
2021/03/01 Python
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
酒店经理职责
2014/01/30 职场文书
工程部岗位职责
2015/02/10 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android