HTML锚点效果改进平滑移动页面滚动特效实现技术
maybe yes 发表于2014-12-26 14:13
原文链接 : http://blog.lmlphp.com/archives/48 来自 : LMLPHP后院
目 前市面上有很多网站的链接上都带有锚点,锚点的作用是当用户到达这个页面后,可以快速的定位到某个元素的位置。使用锚点后,一旦网页加载完成,页面就会快 速的滚动到锚点处,如果锚点在页面底部,则页面将滚动到网页底部,使得页面底部完全展现出来。直接使用原生的锚点有个弊端,就是速度太快,用户可能不能察 觉到它移动的过程,给用户的感觉不太好,于是有些网站改进了锚点的效果,使得页面在移动时有个缓冲期,下面描述其改进原理。
改变地址的锚点名称。比如页面元素的 name 属性为 “comment_22”。可以将网页地址上的锚点名称进行修改,比如加上前缀“anchor_”,这样当用户访问这个网页时,锚点就不会自动的被触发,然后通过JavaScript进行处理。
获取Hash地址,使用 Jquery 的 animate 方法滚动到指定锚点位置,代码参考:
<script>
var hash = window.location.hash.replace(/^#anchor_/, '');
$('html,body').animate({
scrollTop:$("*[name="+hash+"]").offset().top
}, 800);
</script>
关于锚点页面滚动,也可以使用Jquery 插件 jquery.scrollTo.js 实现。
当然, 不使用 JQuery 时,也可以使用纯 JavaScript 实现页面滚动至锚点位置特效,不过实现起来更麻烦一些。JQuery 的 scrollTop() 方法内部调用的是 window.scrollTo() 方法,可以使用 setTimeout 定时器列队加上 window.scrollTo( left, top ) 方法实现平滑滚动。