JQuery插件开发-----------------------------------返回顶部

要实现一些论坛 SNS网站之类的返回顶部的功能其实比较简单我们可以在屏幕右下角使用 fix的定位来指定它的位置不动

当屏幕滚动>某一值的时候让它出现即可点击执行 $('body,html').animate({scrollTop:0},1000);即可

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
<title>jQuery返回顶部</title>
<style type="text/css">
body{
    margin: 0 auto;
}

#text{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width: 300px;
}
/*returnTop*/
p#back-to-top{
    position:fixed;
    display:none;
    bottom:80px;
    right:80px;
}
p#back-to-top a{
    text-align:center;
    text-decoration:none;
    color:#d1d1d1;
    display:block;
    width:60px;
    /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
    -moz-transition:color 0.5s;
    -webkit-transition:color 0.5s;
    -o-transition:color 0.5s;
}
p#back-to-top a:hover{
    color:#979797;
}
p#back-to-top a span{
    background:url(top.gif) no-repeat -51px 0;
    border-radius:6px;
    display:block;
    width: 60px;
    height: 60px;
    margin-bottom:5px;
    /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
    -moz-transition:background 0.2s;
    -webkit-transition:background 0.2s;
    -o-transition:background 0.2s;
}
#back-to-top a:hover span{
    background:url(top.gif) no-repeat -113px 0;
}
</style>

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
$(function(){
        //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>400){
                    $("#back-to-top").fadeIn(1000);
                }
                else
                {
                    $("#back-to-top").fadeOut(1000);
                }
            });

            //当点击跳转链接后，回到页面顶部位置

            $("#back-to-top").click(function(){
                //注意scrollTop 到0即可
                $('body,html').animate({scrollTop:0},1000);
                return false;
            });
        });
    });
</script>
</head>

<body>
<div id="bq" style="height:3000px;background:#444">
    <div id="text">Designed By BaiQiang</div>
</div>
<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>
</body>
</html>