本文章来给大家介绍两款不错的jq和javascript实现返回顶部实现程序，各位朋友可参考参考。
jquery博客现在准时下班，最近加的蛮累的，估计有加班后遗症了，擦。。。。
话说有时候，付出和你收获的不一定成正比，纠结在此，矛盾。。。。
妈妈在煮可口的饭菜。早回来，也没什么事，看到好多网站上比如新浪微博之类的有页面拉到最下面，然后有个返回顶部的，我感觉蛮好，用户体验没得说，个人对新浪的产品很感兴趣，佩服那些奋斗在新浪的前端开发们。
jquery版 DEMO
| 代码如下 |
|
|
<script type="text/javascript" src="/jquery.min.js"></script>
<script>
(function() {
var $backToTopTxt = "返回顶部", $backToTopBox = $('<div class="backToTop"></div>').appendTo($("body"))
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
$("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopBody = function() {
var st = $(document).scrollTop(), wh = $(window).height();
(st > 0)? $backToTopBox.show(): $backToTopBox.hide();
//IE6下的定位
if (!window.XMLHttpRequest) {
$backToTopBox.css("top", st + wh - 166);
}
};
$(window).bind("scroll", $backToTopBody);
$(function() { $backToTopBody(); });
})();
</script>
<div style="width:100%;height:600px;margin:0 auto"></div>
|
javasript版 DEMO
| 代码如下 |
|
|
<div style="width:100%;height:1600px;margin:0 auto"></div>
<script type="text/javascript">
//<![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()', 10);
}
}
}
//]]>
</script>
<a href="javascript:void(0)" onclick="goto_top()" style="float:right">返回顶部</a>
|
上面代码都测试过了，直接拿过去就可以使用了哦，个人推荐使用jquery版本返回顶部了。
