<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>document</title>

     <style media="screen">

         img {

             position: fixed;

             bottom: 100px;

             right: 50px;

             cursor: pointer;

             display: none;

             border: 1px solid #ddd;

         }

         div {

             width: 800px;

             margin: 80px auto;

             font: 500 18px/1.5 "simSun";

             color: darkorange;

         }

     </style>

 </head>

 <body>

     <img src="data:images/Top.jpg" alt="">

     <div>

     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa porro numquam modi. Nulla, in maxime numquam iure debitis consequatur quasi quae consequuntur vitae omnis, commodi rem quibusdam quisquam dolores quo ut ipsam. Doloremque aliquam ipsum vero tenetur cumque eveniet quo cupiditate et ullam eum mollitia cum, eos aspernatur dicta accusamus, fugit deserunt fuga, veritatis natus in ratione voluptas, laboriosam facilis! Similique debitis, repellendus corrupti perspiciatis cum accusantium maxime nam facere architecto quasi aut quod, iusto dignissimos cumque necessitatibus! Accusantium culpa,

     <br>

     <br> adipisci natus quas quae quia tempore perspiciatis dolorem ut explicabo sequi, sit! Ab ducimus placeat expedita iusto maiores vel animi, quasi id rem omnis dolorum tenetur explicabo veritatis. Praesentium ullam, architecto veniam voluptatibus molestias doloribus sed aperiam ipsam iusto cum nisi vero nostrum officia quae, sit hic commodi! Modi laborum porro hic provident tempora. Error libero itaque vitae molestias dolore tempore repellat sed cum voluptate explicabo officiis aliquid, vero modi, possimus fugit ipsam reiciendis minima. Saepe asperiores fugiat pariatur, vero beatae, blanditiis. Aliquid consequuntur omnis minima voluptas obcaecati mollitia odio eum ex repellendus rerum, laboriosam molestias,

     <br>

     <br> veniam, aliquam dolorum! Vel eaque, modi vero autem molestias doloribus quae facere, accusamus enim atque amet. Commodi, saepe temporibus quaerat veritatis omnis, nemo facere odit beatae iusto doloremque consequatur odio harum! Facere dolores provident cum, corporis iure nulla nostrum dolorum minus in quaerat laboriosam vero sequi delectus quos perferendis maxime quas, consectetur quis aliquam illo et temporibus. Temporibus veritatis sequi, mollitia rem eveniet repellat quos in nulla! Deleniti magni fugitbr

     <br>

     <br>dicta, ea debitis natus molestiae itaque nam, ab quidem enim ex optio, eaque, qui perferendis modi. Omnis in voluptate necessitatibus saepe, vero quas vitae cumque sint sequi, ad sapiente nemo illum eum quidem, rerum laudantium commodi dicta facilis veniam molestias quis maxime nisi? Dolor delectus sapiente eveniet ipsam pariatur, fuga quos rerum officia nostrum aliquam temporibus odio minus quod earum libero mollitia quas blanditiis. Minus voluptates, numquam repudiandae unde odio ducimus quaerat eligendi veniam debitis facilis esse iste saepe

     <br>

     <br>cum iure? Alias voluptate praesentium beatae mollitia debitis a dolorum, incidunt blanditiis maxime. Deleniti debitis quae minus eaque tempore vel eligendi a neque ad, incidunt nobis in sit obcaecati dolore. Ex earum cum distinctio fugiat eligendi adipisci, debitis atque, non eius iusto, consectetur magnam sapiente quo repellendus. Natus in itaque possimus eos, repudiandae debitis necessitatibus vero facere eveniet animi, minus sint illo dicta. Odit, ad temporibus non laboriosam, error maiores earum reprehenderit illo nisi vel est fugiat magni eius tempora tempore! Quaerat modi omnis est, ipsa expedita blanditiis. Voluptas qui modi nulla earum fuga perspiciatis mollitia et placeat, provident cum molestiae ab veritatis, consequatur necessitatibus sequi, nihil error quibusdam odit. Distinctio mollitia, repudiandae magni minus aliquid harum aperiam illum in? Hic, quaerat illo deserunt nihil voluptatem molestiae cupiditate, quis dolores unde aperiam minus. Aspernatur asperiores aliquam fugit non animi, dolor, perferendis delectus similique tempora? Sed ex beatae natus voluptate maiores laudantium voluptatem, quo earum praesentium repellat odit, vel fuga tenetur cum id, iure fugit sapiente repellendus

     <br>

     <br>perspiciatis totam. Veritatis, modi consequuntur dolore vero repudiandae distinctio sit maxime sapiente. Quisquam tempora laborum sed excepturi natus debitis porro corrupti cum voluptatem vitae, odit, officia ullam illo officiis odio consequatur expedita possimus! Dicta placeat nulla numquam hic itaque molestiae asperiores assumenda similique id eos vero earum, ea fugiat esse blanditiis excepturi obcaecati sequi! Sapiente est, nostrum non saepe, facere velit placeat voluptas, sit molestiae rem soluta

     <br>

     <br>iure itaque illum! Rem repellendus, explicabo asperiores accusantium, deleniti aperiam accusamus reiciendis alias dolore modi ipsum beatae dolor praesentium. Maiores amet molestias pariatur in animi ipsa nobis deleniti nulla voluptatum rerum sapiente culpa minima reiciendis voluptatem, nam, impedit fuga, esse delectus enim repellat, laboriosam quod sunt repellendus! Pariatur perferendis voluptates

     <br>

     <br>error rem non, ullam laudantium? Quidem nisi quos debitis, unde obcaecati cumque animi autem atque facere neque incidunt itaque esse error harum asperiores fuga distinctio culpa. Reprehenderit minus deserunt nobis repellendus et provident, inventore commodi sed laudantium! Saepe inventore vel mollitia maiores eum dolor quia esse, facilis magni, exercitationem suscipit, vero magnam qui aut culpa molestias neque porro.

 </div>

 <script type="text/javascript">

     var img = document.getElementsByTagName("img")[0];

     window.onscroll = function(){

         //被卷去的距离>200，显示返回顶部图标

         //否则隐藏

         if (scroll().top > 1000) {

             img.style.display = "block";

         }else {

             img.style.display = "none";

         }

         //每次移动滚动条的时候都给leader赋值，模拟leader获取顶部的距离

         leader = scroll().top;

         }

         //缓动跳转到页面最顶端

         var timer = null;

         var target = 0;  //目标位置

         var leader = 0;  //显示区域自身的位置

         img.onclick = function(){

             //技术点：window.scrollTo(0,0)

             //要用定时器，先清定时器

             clearInterval(timer);

             timer = setInterval(function(){

                 //获取步长

                 var step = (target - leader) / 10;

                 //二次处理步长

                 step = step > 0 ? Math.ceil(step) : Math.floor(step);

                 leader = leader + step;

                 //显示区域移动

                 window.scrollTo(0,leader);

                 //window.scrollTo(x,y); x:横向滚动条的坐标; y:纵向滚动条的坐标;

                 //清除定时器

                 if (leader === 0) {

                     clearInterval(timer);

                 }

             },30);

         }

     function scroll(){  //开始封装要用的scrollTop

         if (window.pageYOffset != null) {

             //因为window.pageYOffset的默认值是0，所以需要判断

             return {

                 left: window.pageXOffset,

                 top: window.pageYOffset

             }

         }else if (document.compatMode === "CSS1Compat") {

             //标准浏览器，来判断有没有声明DTD

             return {

                 left: document.documentElement.scrollLeft,

                 top: document.documentElement.scrollTop

             }

         }

         return {

             //未声明DDTD

             left: document.body.scrollLeft,

             top: document.body.scrollTop

         }

     }

 </script>

 </body>

 </html>

javascript 缓动返回顶部案例的更多相关文章

  1. jQuery---小火箭返回顶部案例

    小火箭返回顶部案例 1. 滚动页面,当页面距离顶部超出1000px,显示小火箭. 封装在scroll函数里,当前页面距离顶部为$(window).scrollTop >=1000 小火箭显示和隐 ...

  2. JS——BOM操作（点击按钮返回顶部案例：scrollTop的用法）

    点击按钮返回顶部案例: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. JavaScript 缓动效果

    Math.easeout = function (A, B, rate, callback) { if (A == B || typeof A != 'number') { return; } B = ...

  4. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  5. 【JavaScript&jQuery】返回顶部

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. javascript实现网页返回顶部功能

    在浏览网页时,我们一般是拖动滚动条向下滑动,浏览下面的内容,当页面超过单页时,右下角会出现一个回到顶部的图标,有些网站这个图标一直显示在右下角的. 有些网站使用锚链接来实现页面内容的跳转,但这种效果的 ...

  7. JavaScript实现减速返回顶部

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

  8. js网页返回顶部和楼层跳跃的实现原理

    这是简单的效果图. (实现楼层间的跳跃,主要依靠的是 window.scrollTo(x,y)方法 ,将浏览器的可见区域移动到指定的x,y坐标上.)   说楼层跳跃前,先温习下,一般网页在高度较大时, ...

  9. 渲染优化 之fixed与返回顶部 以及开启GPU Hack

    fixed元素,常见网站右侧出现一个返回顶部的按钮,滚动的时候,会发现返回顶部这个区域在不停的进行重绘,而返回顶部是position:fixed定位的.这也解释了为什么fixed定位是最耗性能的属性之 ...

随机推荐

  1. linux_压缩解压命令(zip/tar)

    一.zip 1.压缩 格式 $ zip (选项) (文件/目录) 选项 -r 参数表示递归打包包含子目录的全部内容. -q 参数表示为安静模式,即不向屏幕输出信息. -o 表示输出文件,需在其后紧跟打 ...

  2. flask+mako+peewee(上)

    其实关于什么用flask搭建一个后台博客啥的跟着官方文档做一遍就行了.感觉啥都有我这里就不赘述了只是记录一个笔记,因为稍微有几个地方有点坑. 目标:做了一个简易页面给电商的同事用来添加商品 首先是安装 ...

  3. MySQL分区管理

    以下是我看MySQL官方文档的时候整理的笔记,仅作参考保留. RANGE,LIST分区管理 1:为未分区表创建分区 ; 2:删除某个分区的数据 ALTER TABLE tr DROP PARTITIO ...

  4. Bootstrap洼地

    前面的话 这是一个轻量.灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容.本文将详细介绍Bootstrap洼地 概述 洼地(Well)样式的效果和巨幕jumbotron样式类似,不同点是we ...

  5. codeforces620A

    Professor GukiZ's Robot CodeForces - 620A 机器人很好玩 一开始在(x1,y1) 最后在(x2,y2) 每秒钟内横坐标最多变化1(也可以不变化)纵坐标也是 问最 ...

  6. cxf Webservice 使用httpClient 调用

    package com.wistron.wh.swpc.portal.uitl; import java.io.BufferedInputStream;import java.io.File;impo ...

  7. ceph 安装ceph问题汇总

    1.在不同节点安装ceph时,出现以下异常: 参考这里 ceph deploy RuntimeError: NoSectionError: No section: 'ceph' 解决方法: 在报错的机 ...

  8. BZOJ5415[Noi2018]归程——kruskal重构树+倍增+堆优化dijkstra

    题目描述 本题的故事发生在魔力之都,在这里我们将为你介绍一些必要的设定. 魔力之都可以抽象成一个 n 个节点.m 条边的无向连通图(节点的编号从 1 至 n).我们依次用 l,a 描述一条边的长度.海 ...

  9. LOJ116 有源汇有上下界最大流（上下界网络流）

    考虑有源汇上下界可行流:由汇向源连inf边,那么变成无源汇图,按上题做法跑出可行流.此时该inf边的流量即为原图中该可行流的流量.因为可以假装把加上去的那些边的流量放回原图. 此时再从原来的源向原来的 ...

  10. Laravel框架简单的用户管理[CURD]操作

    一个基于laravel和bootstrap的简单的用户管理,适合刚入门的我们,在做的过程中可以加深自己对laravel基础理解,里面存在一些问题,还未修改,比如css和js的引入,表单提交地址等不规范 ...