jQuery实现分章节锚点“回到顶部”动画特效代码
编程学习 2021-07-04 21:03www.dzhlxh.cn编程入门
这篇文章主要介绍了jQuery实现分章节锚点“回到顶部”动画特效代码,涉及jQuery响应鼠标事件结合scroll实现页面滚动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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*