js返回顶部小Demo

Posted 2022-11-23 renqiaoqiao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js返回顶部小Demo相关的知识，希望对你有一定的参考价值。

    <style>
        .divH 
            height: 1800px;
        
        .divT 
            width: 50px;
            height: 50px;
            font-size: 18px;
            background-color: #2F4F4F;
            text-align: center;
            color: white;
            position: fixed;
            right: 18px;
            bottom: 18px;
        
        .divT:hover
            cursor: pointer;
        
        .hide 
            display: none;
        
    </style>
</head>
<body>
<div class="divH"></div>
<div class="divT hide" onclick="ReturnTop();"><strong>返回顶部</strong></div>

<script src="./jq/jquery-1.9.1.min.js"></script>
<script>
    window.onscroll = function () 
        var current = $(window).scrollTop();
        if (current > 180)
            $(".divT").removeClass("hide");
        else 
            $(".divT").addClass("hide");
        
    ;

    function ReturnTop() 
        $(window).scrollTop(0);
    
</script>

网页右下角有个返回顶部按钮，模仿淘宝？window.scrollTop()方法

以上是关于js返回顶部小Demo的主要内容，如果未能解决你的问题，请参考以下文章