LMLPHP后院

HTML锚点效果改进平滑移动页面滚动特效实现技术

目前市面上有很多网站的链接上都带有锚点,锚点的作用是当用户到达这个页面后,可以快速的定位到某个元素的位置。使用锚点后,一旦网页加载完成,页面就会快速的滚动到锚点处,如果锚点在页面底部,则页面将滚动到网页底部,使得页面底部完全展现出来。直接使用原生的锚点有个弊端,就是速度太快,用户可能不能察觉到它移动的过程,给用户的感觉不太好,于是有些网站改进了锚点的效果,使得页面在移动时有个缓冲期,下面描述其改进原理。

改变地址的锚点名称。比如页面元素的 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 ) 方法实现平滑滚动。

相关文章
LMLPHP,可爱滴WEB开发框架

2017-07-27 04:33:20 1501101200 0.010418