jQuery-缓慢回到顶部

最新推荐文章于 2020-12-07 10:55:36 发布

周士森

最新推荐文章于 2020-12-07 10:55:36 发布

阅读量127

点赞数

分类专栏： JavaScript 文章标签： jQuery 回到顶部

本文链接：https://blog.csdn.net/weixin_43690495/article/details/103479499

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

HTML

<div class="div1">段落1</div>
 
<div class="div2">段落2</div>

<div class="div3">段落3</div>

<div class="div4">段落4</div>

<div class="div5">段落5</div>

<div class="div6">段落6</div>

<div class="div7">段落7</div>

<div class="returnTop_scroll">
    <p>TOP</p>
</div>

CSS

* {
    margin:0px;
    padding:0px;
    font-family:'微软雅黑';
}
div {
    height:400px;
    border:10px solid lightgray;
    width:600px;
    margin: auto;
    font-size: 3em;
}

.returnTop_scroll{
    position: fixed;
    bottom: 50px;
    right: 30px;
    width: 70px;
    height: 70px;
    background:#ddd;
    text-align: center;
    font-size: 2em;
    cursor: pointer;
    display: none;
}

jQuery

$(function(){
   $(window).scroll(function () {
        if ($(this).scrollTop() > 300) {
         	$(".returnTop_scroll").fadeIn();
        } else {
         	$(".returnTop_scroll").fadeOut();
        }
    });
    $(".returnTop_scroll").click(function () {
        if ($(window).scrollTop() > 0) {
         	$("html,body").stop().animate({ scrollTop: 0 }, 1000);
        }
    });
})