JS特效-滚动返回页面顶部

“返回顶部”的文字或者图片链接,点击这个链接后就会自动跳到该页面的顶部。实现这种功能最常用的一种方法是在网页的 body 标签下添加一个“标记”,即:

<body>
<a name=”top”>

然后在页脚添加一个链接即可。

<a href=”#top”>返回顶部</a>

不过现在似乎比较流行动态的特效,比如 Ajax JQuery 什么的,这也要得益于网络传输速度的提高,不然这么些 JavaScript 无疑会严重降低页面载入的时间…

前不久看到一些博客的“返回顶部”效果是动态的从页脚滚动到页面顶部的,而不是常规的瞬间弹到顶部,看起来挺酷的。
(效果可以直接参考本站底部的“返回顶部”,点击一下即可~)于是就 google 了一下,找到了相应的 JS 代码:

//<![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);
}
}
}
//]]>

将上述 JS 代码添加到页脚内,然后再添加如下的链接:

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

OK,完事~

对于 WordPress 博客而言,我们可以这样做:
这里我把上述的 JS 代码单独写成一个文件 gototop.js(下载点击这里),把这个文件 FTP 到所使用的主题目录下,然后编辑 footer.php ,添加文件调用语句:

<script src=”<?php bloginfo(‘stylesheet_directory’); ?>/gototop.js” type=”text/javascript” charset=”utf-8″></script>

最后在 footer.php 相应的地方加入

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

这样你也可以拥有这个动态的效果了。。。(转自网络)

《JS特效-滚动返回页面顶部》有一个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注