Angbike个人博客 > JavaScript/JQuery > 简单Jquery实现点击返回顶部

简单Jquery实现点击返回顶部

效果基于jquery,首先需要引入jquery。

HTML代码:

<div id="backTop" style="display: block;"></div>

CSS代码:

#backTop {
    width: 54px;
    height: 54px;
    overflow: hidden;
    right: 15px;
    position: fixed;
    z-index: 100;
    bottom: 30px;
}
#backTop a {
    display: block;
    border-radius: 2px;
    width: 54px;
    height: 54px;
    overflow: hidden;
    background: url('图片路径') no-repeat;
}

Js代码:

$(document).ready(function(){
    //首先将#backTop隐藏
    $("#backTop").hide();
    //当滚动条的位置处于距顶部400像素以下时,跳转链接出现,否则消失
    $(function () {
        $(window).scroll(function(){
            if ($(window).scrollTop()>400){
                $("#backTop").fadeIn(500);
            }else{
                $("#backTop").fadeOut(500);
            }
        });
        //当点击跳转链接后,回到页面顶部位置
        $("#backTop").click(function(){
            $('body,html').animate({scrollTop:0},500);
            return false;
        });
    });
});

博客评论已关闭