代码改变世界

JQuery 实现返回顶部

2014-05-08 17:36  taozsay  阅读(195)  评论(0)    收藏  举报

1.添加html

<div id="back-to-top">
    <a href="javascript:;" title="返回顶部"><img src="/Images/top.png" alt=""/></a>
</div>

2.添加js代码

$(function () {
        //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 100) {
                    $("#back-to-top").fadeIn(1500);
                }
                else {
                    $("#back-to-top").fadeOut(0);
                }
            });

            //当点击跳转链接后,回到页面顶部位置
            $("#back-to-top").click(function () {
                $('body,html').animate({ scrollTop: 0 }, 1000);
                return false;
            });
        });
    });