返回页面顶部的JS特效

一个很贴心的小功能,返回页面顶部,很多网站都有。一个文字或者图片链接,点击这个链接后就会自动跳到该页面的顶部。

常用的方法是在body标签添加一个标记。

<body>
 <a name="top">

然后在需要的地方添加链接即可。

<a href="#top">返回</a>

还有更简单的,我一般都是这么干的,一个空标记就可以返回顶部,不知道为什么,反正这样行的通

<a href="#">返回顶部</a>

有朋友留言说需要这段代码,找出来贴一下

//<![CDATA[
 var goto_top_type = -1;
 var goto_top_itv = 0;
 function goto_top_timer(){
 var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;
 var moveby = 15;
 y -= Math.ceil(y * moveby / 100);
 if (y < 0) {
 y = 0;
 }
 if (goto_top_type == 1) {
 document.documentElement.scrollTop = y;
 }
 else {
 document.body.scrollTop = y;
 }
 if (y == 0) {
 clearInterval(goto_top_itv);
 goto_top_itv = 0;
 }
 }
 function goto_top()
 {
 if (goto_top_itv == 0) {
 if (document.documentElement && document.documentElement.scrollTop) {
 goto_top_type = 1;
 }
 else if (document.body && document.body.scrollTop) {
 goto_top_type = 2;
 }
 else {
 goto_top_type = 0;
 }
 if (goto_top_type > 0) {
 goto_top_itv = setInterval('goto_top_timer()', 50);
 }
 }
 }
 //]]>

然后再在适当的地方添加如下的链接:

<a href="javascript:void(0)" onclick="goto_top()">返回页顶</a>

One thought on “返回页面顶部的JS特效

  1. 呵呵,兄弟太感谢你了,可能在你发布这篇支持时,我已经拿网络上搜来的代码实验成功了,不过还是要感谢你。
    再次顶你一下,你文章里面的特效实在是不错呵呵,把你网站永久收藏了,以后多跟你学习哈,O(∩_∩)O~

发表评论