返回顶部实现方式

Posted forever77

tags:

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

通过window对象的scrollTop()实现,$(window).scrollTop()表示滚动条距离上方的距离,$(window).scrollTop(0)表示设置距离为0即返回顶部

<head>
    <meta charset="UTF-8">
    <title>console</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.js"></script>
    <style>
        *{margin: 0;padding: 0}
        div {height: 1000px;background: pink}
        button{height:30px;width:80px;position:fixed;bottom:5px;right:5px}
        .hide{display:none} <!--如果class包含hide则不显示-->
    </style>
</head>
<div>
    内容区
</div>
<button class="returnTop hide" onclick="returnTop()">返回顶部</button>
<script>
    window.onscroll=function () {  //滚动条事件
        if ($(window).scrollTop()>250){
           $(.returnTop).removeClass(hide)  //如果滚动条距离上方超过250px,则删除按钮的hide,即显示“返回顶部”按钮
       } else{
           $(.returnTop).addClass(hide)}   //如果滚动条距离上方不超过250px,则增加按钮的hide,即不显示“返回顶部”按钮
    }

    function returnTop() {
        $(window).scrollTop(0)  //如果点击“返回顶部”按钮,设置滚动条距离上方距离为0,即返回顶部
    }
</script>
 

 

以上是关于返回顶部实现方式的主要内容,如果未能解决你的问题,请参考以下文章

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

AndroidListview返回顶部,快速返回顶部的功能实现,详解代码。

AndroidScrollview返回顶部,快速返回顶部的功能实现,详解代码。

AndroidListview返回顶部,快速返回顶部的功能实现,详解代码。

如何用JS实现返回顶部?

当按下返回按钮时,listview 会顶部。如何解决?