jQuery实现分章节锚点回到顶部效果-js教程-PHP中文网

首页

web前端

js教程

jQuery实现分章节锚点回到顶部效果

php中世界最好的语言

Apr 24, 2018 pm 01:45 PM

jquery顶部

这次给大家带来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, p, 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;
}/*这个只能改宽高其他的不要修改，需要滚动的内容都要放在这个p里面*/
.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的p距浏览器底部和页面内容区域右侧的距离函数#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的p距浏览器底部和页面内容区域右侧的距离
 $('#gotop').click(function(){ 
  $('body,html').animate({
   scrollTop: 0
  },
  800);//点击回到顶部按钮，缓懂回到顶部,数字越小越快
  return false; 
 })
});
 });
</script>
</head>
<body>
<p 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>
</p>
<p class="h50"></p>
<p class="row" id="main">
 <h2 id="index_1">这是第一个活动页</h2>
 <p class="mainpage mainpage1"></p>
</p>
<p class="h15"></p>
<p class="row">
 <h2 id="index_2">这是第二个活动页</h2>
 <p class="mainpage mainpage2"></p>
</p>
<p class="h15"></p>
<p class="row">
 <h2 id="index_3">这是第三个活动页</h2>
<p class="mainpage mainpage3"></p>
</p>
<p class="h15"></p>
<p class="row">
 <h2 id="index_4">这是第四个活动页</h2>
 <p class="mainpage mainpage4"></p>
</p>
<p class="h15"></p>
<p class="row">
 <h2 id="index_5">这是第五个活动页</h2>
 <p class="mainpage mainpage5"></p>
</p>
<p 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" -->
</p>
</p>
</body>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JQuery+Ajax动态生成Table步骤详解

jQuery过滤方法filter()使用详解

以上是jQuery实现分章节锚点回到顶部效果的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript框架：为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑：1.项目规模和复杂度，2.团队经验，3.生态系统和社区支持。

JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr

node.js流带打字稿Apr 30, 2025 am 08:22 AM

Node.js擅长于高效I/O，这在很大程度上要归功于流。流媒体汇总处理数据，避免内存过载 - 大型文件，网络任务和实时应用程序的理想。将流与打字稿的类型安全结合起来创建POWE

Python vs. JavaScript：性能和效率注意事项Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差异主要体现在：1)Python作为解释型语言，运行速度较慢，但开发效率高，适合快速原型开发；2)JavaScript在浏览器中受限于单线程，但在Node.js中可利用多线程和异步I/O提升性能，两者在实际项目中各有优势。

JavaScript的起源：探索其实施语言Apr 29, 2025 am 12:51 AM

JavaScript起源于1995年，由布兰登·艾克创造，实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。

幕后：什么语言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行，依赖JavaScript引擎解析和执行代码。1）解析阶段生成抽象语法树（AST）；2）编译阶段将AST转换为字节码或机器码；3）执行阶段执行编译后的代码。

Python和JavaScript的未来：趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括：1.Python将巩固在科学计算和AI领域的地位，2.JavaScript将推动Web技术发展，3.跨平台开发将成为热门，4.性能优化将是重点。两者都将继续在各自领域扩展应用场景，并在性能上有更多突破。

Python vs. JavaScript：开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

See all articles