<!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. storm(一) window机制

    Watermark作用 在解释storm的window之前先说明一下watermark原理. Watermark中文翻译为水位线更为恰当. 顺序的数据从源头开始发送到到操作,中间过程肯定会出现数据乱序 ...

  2. Tachyon：Spark生态系统中的分布式内存文件系统

    转自: http://www.csdn.net/article/2015-06-25/2825056  摘要:Tachyon把内存存储的功能从Spark中分离出来, 使Spark可以更专注计算的本身, ...

  3. [小问题笔记（三）] SVN树冲突（Tree Conflict），文件不能提交的解决办法

    传说中SVN的树冲突是由不同开发者删除文件,移动文件神马的造成的. 我们遇到的情况是: 开发人员小B移动了项目中几个文件然后提交.开发人员小L更新项目至最新版本. 获取到移动后的文件则显示文件已被修改 ...

  4. /nagios/cgi-bin/cmd.cgi无法打开

    原因分析,nginx不支持post. 解决方法,重新编译nagios 1.vi /nagios-4.0.8/cgi/cmd.c 找到printf("<form method='post ...

  5. POJ 1236 Network of School

    http://poj.org/problem?id=1236 题意: 给出一个图,至少要选多少个点才能遍历全图和至少需要添加多少边使得整个图是强连通. 思路: 强连通计算连通分量后缩点,计算入度为0的 ...

  6. codeforces246E Blood Cousins Return

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  7. ubuntu mac terminal install software

    http-server // ubuntu sudo npm install http-server -g npm node.js yarn

  8. Asp.Net MVC向视图View传值的三种方法

    本文将总结Asp.Net MVC向视图View传值的三种常见的方法: ----------------------------------------------------------------- ...

  9. apollo stomp client 代码示例

    0.环境准备 0.1.linux 0.2.java 0.3.下载apollo二进制包,解压 0.4.创建broker,名字为 userlog {APOLLO_HOME}/bin/apollo crea ...

  10. Normalize.css与CSS reset区别

    Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备 ...