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

前端技术 2023/09/08 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.net/js/2015/jquery-turn-top-focus-style-demo/

具体代码如下：

<!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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/20868

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案