<!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. dubbo-admin与多注册中心(注册中心集群)

    在使用dubbo时,注册中心是一个必要的架构组成成员.当我们的注册中心没有采取集群时,如何在dubbo-admin中配置,我们可以根据dubbo官方文档,很快找到我们的答案. 但是当注册中心集群之后怎 ...

  2. python 使用getopt 获取配置参数

    在工程中特别是稍微大一点的项目基本上都会用到配置,就会涉及到配置文件的读取,配置参数的读取. 常用的解析配置文件的是configParser,解析命令行参数的则为getopt. getopt的参数可以 ...

  3. nginx for windows 中虚拟主机路径设置问题

    由于Windows版本的Nginx其实是在Cygwin环境下编译的,所以Nginx使用的是Cygwin的路径格式,所以在Nginx的配置文件nginx.conf中,路径既不能使用*nix的格式,也不能 ...

  4. Gym100783C Golf Bot（FFT）

    https://vjudge.net/problem/Gym-100783C 题意: 给出n个数,然后有m次查询,每次输入一个数x,问x能否由n个数中2个及2个以下的数相加组成. 思路:题意很简单,但 ...

  5. Dockerfile 设置语言包

    最近使用Hangfire的Dashboard, 在本地调试时,显示的是中文,但是通过docker在kubernetes上运行时,就显示成英文了, 怀疑是docker运行环境中没有设计默认的语言包: 我 ...

  6. Solr学习总结 Solr的安装与配置

    接着前一篇,这里总结下Solr的安装与配置 1．准备 1．安装Java8 和 Tomcat9 ,java和tomcat 的安装这里不再重复.需要注意的是这两个的版本兼容问题.貌似java8 不支持,t ...

  7. C5 标准IO库：APUE 笔记

    C5 :标准IO库 在第三章中,所有IO函数都是围绕文件描述符展开,文件描述符用于后续IO操作.由于文件描述符相关的操作是不带缓冲的IO,需要操作者本人指定缓冲区分配.IO长度等,对设备环境要求一定的 ...

  8. 如何优雅地使用 rm 防止误删除？

    IT 界的有一个老梗,一次某论坛的数据库管理员抱怨自己老板一直虐待他,结果他一气之下就删库跑路了...... 于是... 据新华社北京 8 月 20 日电 ,北京一软件工程师徐某离职后因公司未能如期结 ...

  9. IDEA 中使用 Vue 提示 namespace is not bound

    今天在 IDEA 中使用 vue.js 时提示我如下错误信息 解决方法: 把这个校验项目去掉就可以了.

  10. sql数据类型转换函数

    1.CAST()CAST (<expression> AS <data_ type>[ length ]) 2.CONVERT()CONVERT (<data_ type ...