分章节锚点“回到顶部”动画特效

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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 type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></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(//ku.shouce.ren/files/images/201601/56a31fc56d784.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(//ku.shouce.ren/files/images/201601/56a31fc5c928f.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">
    <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> 
</div>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

分章节锚点“回到顶部”动画特效

分类

网站常用

描述

基于jquery实现的分章节动画实现“回到顶部”的效果，可通过 网页顶部的数字序号直接进入网页的章节，当处于第二章节的时候，网页右侧会显示竖排的控制按钮，点击按钮会回到相应章节，其实也就是定义好的锚点，当然也可回到顶部，网...