<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <style>

        .up {

            display: none; width: 100px; height: 100px; background: red;

            position: fixed; right: 10px; bottom: 20px;

        }

    </style>

    <script>

        var num = 0;

        window.onscroll = function(){

            var up = document.getElementById("top");

            //当前页面滚动的距离？？

            var _top = document.body.scrollTop || document.documentElement.scrollTop;

            if(_top >= 1000){

                up.style.display = "block";

            } else {

                up.style.display = "none";

            }

        }

        function goTop(){

            document.body.scrollTop = document.documentElement.scrollTop = 0;

        }

    </script>

    <body>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>

        <div id="top" class="up" onclick="goTop()" >回到顶部</div>

    </body>

</html>

　　

 
 

js效果之回到顶部的更多相关文章

  1. js悬浮、回到顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JS实现页面回到顶部效果

    [代码] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  3. js点击回到顶部2

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>点 ...

  4. js点击回到顶部

    ---恢复内容开始--- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  5. 【原生js实现一键回到顶部】

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  6. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

  8. 自写jquery网页回到顶部效果，渐隐图标，引用js文件就可以

    唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

  9. JS原生回到顶部效果

    // 回到顶部 onload = function () { var oBtnTop = document.getElementById('toTop'); var timer = null; oBt ...

随机推荐

  1. centos配置yum源为中国镜像源

    有时候CentOS默认的yum源不一定是国内镜像,导致yum在线安装及更新速度不是很理想.这时候需要将yum源设置为国内镜像站点.国内主要开源的开源镜像站点应该是网易和阿里云了. 修改CentOS默认 ...

  2. 2017 ACM-ICPC 南宁区比赛 Minimum Distance in a Star Graph

    2017-09-25 19:58:04 writer:pprp 题意看上去很难很难,但是耐心看看还是能看懂的,给你n位数字 你可以交换第一位和之后的某一位,问你采用最少的步数可以交换成目标 有五组数据 ...

  3. nginx的坑-org.apache.http.TruncatedChunkException: Truncated chunk( expected size: 7752; actual size: 4077)

    org.apache.http.TruncatedChunkException: Truncated chunk 项目中使用请求远程接口报错 ,项目是Spring-boot的,两个项目(A和B) , ...

  4. SOA和SaaS的区别

    SOA,Service Oriented ArchITecture,面向服务的架构 SaaS,Software as a Service https://blog.csdn.net/chenyi888 ...

  5. TestNG，timeOut

    这篇先来介绍@Test注释下的一个属性-timeOut.字面意思就是超时判断,详细点说.如果哪个测试方法需要监听执行的时间,那么就可以考虑采用timeOut属性.例如,实际的接口测试中,加入登录接口时 ...

  6. Java循环语句之 while

    生活中,有些时候为了完成任务,需要重复的进行某些动作.如参加 10000 米长跑,需要绕 400 米的赛道反复的跑 25 圈.在 Java 中实现功能时,也经常需要重复执行某些代码,例如,我们为了表示 ...

  7. Java新建线程的3种方法

    Java新建线程的3种方法 =================== Java创建线程有3种方法:(1)继承Thread;(2)实现Runnable接口:(3)实现Callable接口; 由于Java只 ...

  8. 几款必备LINUX的命令行神器

    Dstat & sar iostat, vmstat, ifstat 三合一的工具,用来查看系统性能(我在<性能调优攻略>中提到过那三个xxstat工具). 官方网站:http:/ ...

  9. cookie和localstorage sessionStorage的概念、区别、使用场景

    本文分为三大板块: 1 webStorage的概念 2 cookie/localStorage/sessionStorage的介绍 3 三者之间的共同点和区别 **所有代码引用均来自 作者:OBKor ...

  10. LeetCode OJ：Sudoku Solver（数独游戏）

    Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicated by th ...