回来页面顶部的JS特效
日期：2014-05-16 浏览次数：20436 次
返回页面顶部的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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
