jquery实现返回页面顶部功能。

时间:2022-11-13 10:04:29
<p id="back-to-top">
    <span></span>
</p>
<script type="text/javascript">
    $(function() {
        //首先将#back-to-top隐藏
        $("#back-to-top").hide();
        //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
        $(function() {
            $(window).scroll(function() {
                if ($(window).scrollTop() > 100) {
                    $("#back-to-top").fadeIn(1500);
                } else {
                    $("#back-to-top").fadeOut(1500);
                }
            });
            //当点击跳转链接后,回到页面顶部位置
            $("#back-to-top").click(function() {
                $('body,html').animate({
                    scrollTop : 0
                }, 300);
                return false;
            });
        });
    });
</script>
<style type="text/css">
p#back-to-top {
    position: fixed;
    bottom: 100px;
    right: 80px;
    cursor:pointer;
}

p#back-to-top  span {
    background:url(skins/images/totop.gif) no-repeat center center;
    border-radius: 6px;
    display: block;
    height: 80px;
    width: 80px;
    margin-bottom: 5px;
    /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
    -moz-transition: background 1s;
    -webkit-transition: background 1s;
    -o-transition: background 1s;
}

#back-to-top span:hover {
    background: url(skins/images/totop.gif) no-repeat center center;
}
</style>

不要忘记引入jquery库