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 相关文章推荐
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
js实现内置计时器
Dec 16 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编写的图片验证码类文件分享
2016/06/06 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
jquery移动节点实例
2015/01/14 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
vue远程加载sfc组件思路详解
2019/12/25 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
python实现的文件夹清理程序分享
2014/11/22 Python
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
Python socket编程实例详解
2015/05/27 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
会计专业毕业生自我评价
2013/09/25 职场文书
解除施工合同协议书
2014/10/17 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
团委工作总结2015
2015/04/02 职场文书
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python