Javascript 回到顶部

回到顶部是个常用的js小脚本，我们在平常见到的很多网站上面都有这样的功能,今天我就把之前写的这个实例放到这里，欢迎鉴定使用测试！

View Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>回到顶部</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
    #main { width: 1000px; height: 3200px; }
    #go_top { display: none; position: fixed; right: 10px; bottom: 10px; z-index: 100px; }
    #go_a_top { display: block; width: 50px; height: 50px; background: url(/returnTop/Img/go_top.gif) no-repeat 0 0 transparent; }
    #go_a_top:hover { background: url(/returnTop/Img/go_top.gif) no-repeat 0 -100px transparent; }
</style>
<script type="text/javascript">
$.fn.extend({
    returnTop: function () {
        var $elem = this.find("a:first");
        var $this = this;
        $elem.bind("click", function () {
            $("body,html").animate({ scrollTop: 0 }, 150);
        });

        $("body")
        .add($(window))
        .bind("scroll", function () {
            var st = $(document).scrollTop();
            (st > 100) ? $this.fadeIn(500) : $this.fadeOut(500);
        });
    }
});
        $(function () {
            $("#go_top").returnTop();
        });
</script>
</head>

<body>
<div id="main">
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
    <p>nibuhaohao</p>
</div>
<div id="go_top"> <a id="go_a_top" href="javascript:;" title="回到顶部"><img src="http://res.c.hjfile.cn/app/images/go_top.gif" /></a> </div>
</body>
</html>

以上就是完成的实例代码，欢迎转载和使用，如果有什么不足和错误之处，希望能够拍砖指出，大家共同交流进步(*^__^*) 嘻嘻！

posted @ 2012-08-07 10:40  拾荒者の  阅读(787)  评论(0)  编辑  收藏  举报