网站开发之添加返回顶部

Posted sucanji

tags:

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

<!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的操作。

 

以上是关于网站开发之添加返回顶部的主要内容，如果未能解决你的问题，请参考以下文章

如何在地图片段 API v2 布局顶部添加按钮

iOS开发CGRectGetMidX. CGRectGetMidY.CGRectGetMinY. CGRectGetMaxY. CGRectGetMinX. CGRectGetMaxX的使用(代码片段

片段中的 Android 谷歌地图

几条jQuery代码片段助力Web开发效率提升

博客园-添加快速返回顶部的功能按键

网页返回顶部之animate方法