<!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. JAVA基础补漏--泛型通配符

    泛型通配符只能用于方法的参数 不能用对象定义 public class Test { public static void main(String[] args) { ArrayList<Str ...

  2. Windows下tomcat进程监控批处理程序

    在Windows下tomcat进程监控批处理程序脚本如下: @echo off ::tomcat安装目录 set _tomcatDir=E:\myFiles\apache-tomcat-8.5.31 ...

  3. java程序结构

    if....else.... 1.  if都需要接判断表达式 2.  else不需要表达式 3. 有if没else可以,但else必须要有一个if,if数>=else数 if (A条件)     ...

  4. Harbor 定制页面 和 二次开发指南

    harbor的官方地址:https://github.com/goharbor/harbor 想对Harbor进行二次开发,首先要指定一个harbor的版本,这里我们以Harbor:1.6.2为例: ...

  5. apollo 部门管理

    apollo 默认部门有两个.如果想要增加自己的部门,只能通过数据库ApolloPortalDB 修改表ServiceConfig中organizations即可:

  6. 【转】爬取豆瓣电影top250提取电影分类进行数据分析

    一.爬取网页,获取需要内容 我们今天要爬取的是豆瓣电影top250页面如下所示: 我们需要的是里面的电影分类,通过查看源代码观察可以分析出我们需要的东西.直接进入主题吧! 知道我们需要的内容在哪里了, ...

  7. 2-1 RHEL6.5 环境搭建与部署

    第二部分:Linux常见服务管理 2-1 RHEL6.5 环境搭建与部署 第二部分主要讲解的是开源服务搭建 学习方法与注意事项: 1. 端正态度,开始学习 2. 认真完成作业和实验(并详细记录) 3. ...

  8. poj-2342-简单树形dp

    Anniversary party Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10388   Accepted: 594 ...

  9. IOS-加载动态图（gif）

    // // BowenView.h // IOS_0302_下拉刷新 // // Created by ma c on 16/3/2. // Copyright © 2016年 博文科技. All r ...

  10. [转载]java实现word转pdf

    最近遇到一个项目需要把word 转成pdf,百度了一下网上的方案有很多,比如虚拟打印.给word 装扩展插件等,这些方案都依赖于ms word 程序,在java代码中也得使用诸如jacob或jcom这 ...