您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
jQuery实现页面内锚点平滑跳转特效的方法总结
作者：佚名 责任编辑：admin 更新时间：2022-06-22
通过jQuery实现页面内锚点平滑跳转的方法很多，可以通过插件hovertreescroll实现，也可以简单的通过animate方法实现，下面介绍这2种比较简单的方法。
平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery实现页面内锚点平滑跳转</title><base target="_blank" /> <style type="text/css"> #hovertree { height: 800px; background: red; text-align:center;color:white; } #keleyi { height: 800px; background: green;text-align:center;color:white; } #myslider { height: 800px; background: black;text-align:center;color:white; } #zonemenu { height: 800px; background: yellow;text-align:center; } .keleyilink{position:fixed;} .keleyilink a {text-decoration:none;} </style> </head> <body> <div class="keleyilink"> <a href="javascript:scroll('hovertree');" target="_self">HoverTree</a> <a href="javascript:scroll('keleyi');" target="_self">KKK</a> <a href="javascript:scroll('myslider');" target="_self">myslider</a> <a href="javascript:scroll('zonemenu');" target="_self">ZoneMenu</a> </div> <div id="hovertree">hovertree <br /><br /><br /><a href="">原文</a> <a href="">JJJ</a> <a href="http://hovertree.com">HoverTree</a> <a href="/">特效库</a> </div> <div id="keleyi">jb51</div> <div id="myslider">myslider</div> <div id="zonemenu">zonemenu</div> <script src="jquery/jquery-1.11.3.min.js"></script> <script src="jquery.hovertreescroll.js"></script> <script> function scroll(id) { $("#" + id).HoverTreeScroll(1000); } </script> </body> </html>更简单点的实现方法：
代码只有一句话
复制代码 代码如下:
$("html,body").animate({scrollTop: $("#elementid").offset().top}, 1000);
animate()方法用来实现一组css的自定义动画，有两种调用方法
第一种形式接受4个参数，如下所示
.animate( properties [, duration] [, easing] [, complete] )
properties – 一个包含样式属性及值的映射
duration – 可选的速度参数，既可以是预置的字符串，也可以是一个毫秒数值
easing – 可选的缓动类型，jquery默认的只有两种：swing和linear,要使用其它效果需要安装缓动类的插件
complete – 可选的回调函数，在动画结束时被调用
第一种形式的示例如下
?
1 2 3 4 .animate({property1: 'value1', property2: 'value2'}, speed, easing, function() { alert('The animation is finished.'); });本文实现锚点跳转的代码使用了第一种形式
$("html,body")代表对html或body元素进行动画，即要改变他们的css属性值
scrollTop是要改变的属性值，表示滚动条滑过的距离，在这里表示向下拉动浏览器滚动条后html(body)被浏览器顶端隐藏的高度
$("#elementid").offset().top就是html(body)需要被浏览器顶端隐藏的高度，它代表id为elementid的元素顶端到网页顶端(不是浏览器可视区域顶端)的绝对距离。
1000是指动画时间为1秒
animate()方法还有第二种调用形式
.animate( properties, options )
一个是属性映射，一个是选项映射。实际上这里的第二个参数是把第一种形式的第2-4个参数封装在另一个映射中，同时又添加了两个选项。第二种形式的代码如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 .animate({ property1: 'value1', property2: 'value2' }, { duration: 'value', easing: 'value', complete: function(){ alert('The animation is finished.'); }, queue: boolen, step: callback });以上所述就是本文的全部内容了，希望大家能够喜欢。
- 上一个程序编程： 在JavaScript中正确引用bind方法的应用
- 下一个程序编程： 浅谈jQuery构造函数分析
