js一个简单的返回顶部

爱吃西瓜

于 2018-05-02 20:42:18 发布

阅读量174

点赞数

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/qq_41823953/article/details/80171705

版权

HTML 专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div{
            width: 100%;
            height: 1000px;
        }
        .div1{
            background: red;
        }
        .div2{
            background: aqua;
        }
        .div3{
            text-align: center;
            width: 100px;
            height: 50px;
            background: darkgray;
            position: fixed;
            right: 10px;
            bottom: 10px;
            line-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="div1 div"></div>
<div class="div2 div"></div>
<div class="div3 hide" οnclick="returnTop()">返回顶部</div>

<script  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
        window.οnscrοll=function () {
            if ($(window).scrollTop()>50){
                $(".div3").removeClass("hide")
            }
            else {
                $(".div3").addClass("hide")
            }

        }
    function returnTop(){
        $(window).scrollTop(0)
    }
</script>
</body>
</html>