首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

回来页面顶部的JS特效

2012-10-09 
返回页面顶部的JS特效一个很贴心的小功能,返回页面顶部,很多网站都有。一个文字或者图片链接,点击这个链接

返回页面顶部的JS特效

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

?

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

?

<body>   <a name="top"> 

?

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

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

?

还有更简单的,一个空标记就可以返回顶部。

?

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

?

现在提供一个带效果的返回顶部的代码。

?

<script type="text/javascript">  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);         }       }     }   </script>

?

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

?

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

热点排行