js+JQuery实现返回顶部功能

标签：返回顶部   color   io   os   使用   ar   sp   cti   on   

在ＨＴＭＬ头部添加

<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>

然后 jquery 中写入

 <script>
        $(function () {
            //当滚动条的位置处于距顶部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 }, 1000);
                    return false;
                });
            });
        });
</script>

为了美观 css样式  增加自己的图片地址

p#back-to-top {
    position: fixed;
    display: none;
    bottom: 100px;
    right: 80px;
}

    p#back-to-top a {
        text-align: center;
        text-decoration: none;
        color: red;
        display: block;
        width: 64px;
        /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
        -moz-transition: color 1s;
        -webkit-transition: color 1s;
        -o-transition: color 1s;
    }

        p#back-to-top a:hover {
            /*color:#979797;*/
            color: #000;
        }

        p#back-to-top a span {
            background:transparent url(‘../img/Gnome-Go-Top-48.png‘) no-repeat;
           
            border-radius: 6px;
            display: block;
            height: 64px;
            width: 56px;
            margin-bottom: 5px;
            /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
            -moz-transition: background 1s;
            -webkit-transition: background 1s;
            -o-transition: background 1s;
        }

#back-to-top a:hover span {
    background: transparent url(‘../img/Gnome-Go-Top-48.png‘) no-repeat ;
}

js+JQuery实现返回顶部功能

标签：返回顶部   color   io   os   使用   ar   sp   cti   on   

原文地址：http://www.cnblogs.com/lschenblog/p/3968709.html