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

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 ) 方法实现平滑滚动。

阅(27)评(0)查看评论