网站开发之添加返回顶部

时间：2019-05-23 13:12:42 阅读：140 评论：0 收藏：0 [点我收藏+]

标签：scrollto func one click OLE htm title dcl position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    .div1{
        width: 100%;
        height: 800px;
        background-color: #0066CC;
    }
    .div2{
        width: 100%;
        height: 800px;
        background-color:red;
    }
    .returnTop{
        height: 50px;
        width: 90px;
        background-color: ghostwhite;
        bottom:10px;
        position: fixed;
        right: 20px;
        text-align: center;
        line-height: 40px;

    }
    .hide{
            display: none;
        }
</style>


<body>

    <div class="div1"></div>
    <div class="div2">
        <div class="returnTop hide" onclick="returnTop();">返回顶部</div>
    </div>



<script src="jquery-3.4.1.js"></script>

<script>
　　
        window.onscroll=function(){
            console.log($(window).scrollTop());
              if ($(window).scrollTop() >100)
             {
                  $(".returnTop").removeClass("hide")}
                  else {
                  $(".returnTop").addClass("hide")
              }
          }
          function returnTop() {
              $(window).scrollTop(0)
          }



</script>


</body>
</html>

中间用了Jqurey模块及一些JS的操作。

网站开发之添加返回顶部

标签：scrollto func one click OLE htm title dcl position

原文地址：https://www.cnblogs.com/sucanji/p/10911248.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行