带运动的返回顶部：当滚动条在滚动的时候,滚动鼠标的滚轮,应该让滚动条停止滚动,清掉定时器。下面的方法b 就是清掉的方法

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>6.带运动的返回顶部</title>

         <meta name="author" content="Administrator" />

         <!-- Date: 2014-12-12 -->

         <style>

             #goTop{width:50px;height:50px;border-radius:5px;background:#006666;position:fixed;right:10px;bottom:10px;text-align:center;line-height:50px;}

         </style>

         <script>

             /**滚动条 带运动返回顶部

              * 运动的值就是  滚动条距离文档顶部的距离,在定时器内获取值

              * 速度 就是目标点(0-当前的scrollTop)/8

              * 滚动距离赋值的时候需要连等：

              * document.documentElement.scrollTop=document.body.scrollTop= iCur +iSpeed**/

             window.onload=function(){

                 var oDiv=document.getElementById('goTop');

                 var timer=null;

                 var b=1;

                 function setTop(){

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

                 }

                 window.onscroll=function(){

                     if( b!=1 ){ //如果b=1,那么b是被定时器触发的,如果不等,就是被其他事件触发,这个时候就要关掉定时器

                         clearInterval(timer);

                     }

                     b=2

                 }

                 oDiv.onclick=function(){

                     clearInterval(timer)

                       timer=setInterval(function(){

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

                             var iSpeed = Math.floor((0 - iCur)/8);

                                 document.documentElement.scrollTop=document.body.scrollTop= iCur +iSpeed;

                             b=1;

                             if(iCur == 0){

                                 clearInterval(timer)

                             }

                       },30)

                 }

             }

         </script>

     </head>

     <body style="height:2000px;">

         <div id="goTop">Top</div>

     </body>

 </html>

JS 带运动的返回顶部 小案例的更多相关文章

  1. JS 缓冲运动 带运动的留言本 小案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解

    如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...

  3. js返回顶部小Demo

    <style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; backgrou ...

  4. 原生js实现简洁的返回顶部组件

    本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...

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

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

  6. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  7. js+JQuery实现返回顶部功能

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

  8. 使用jQuery实现返回顶部功能

    <p id="back-to-top"><a href="#top"><span></span>返回顶部< ...

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

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

随机推荐

  1. ubuntu16.04更改源

    最近用apt-get安装软件总是提示列表无法全部更新,导致一些软件安装不上,下面我们通过讲/etc/apt/sources.list里为阿里源,实现访问. 第一步: 备份/etc/apt/source ...

  2. js 中的定时器

    在js中的定时器分两种:1.setTimeout() 2.setInterval() 1.setTimeOut() 只在指定时间后执行一次 /定时器 异步运行 function hello(){ al ...

  3. 胖ap和瘦ap的区别

    一,什么是AP,胖瘦AP如何区分?       先说说AP的概念.AP是Access Point的简称,即无线接入点,其作用是把局域网里通过双绞线传输的有线信号(即电信号)经过编译,转换成无线电信号传 ...

  4. define与typedef的区别

    define: 发生在预处理阶段,也就是编译之前,仅仅文本替换,不做任何的类型检查 没有作用域的限制 typedef: 多用于简化复杂的类型声明,比如函数指针声明:typedef bool (*fun ...

  5. 属性字符串（NSAttributedString）的简单应用

    属性字符串NSAttributedString 可以对字符串附加格式信息,由于对于对不同文本片段使用不同的格式,属性字符串类特别合适. IOS 6中对样式文本有了大改善,大部分主要的UIKit控件都允 ...

  6. [转]Linux下/proc目录简介

    1. /proc目录Linux 内核提供了一种通过 /proc 文件系统,在运行时访问内核内部数据结构.改变内核设置的机制.proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它以文 ...

  7. 开发日记(项目中SQL查询的优化)

    今天发现自己之前写的一些SQL查询在执行效率方面非常不理想,于是尝试做了些改进. 需求为查询国地税表和税源表中,国税有而税源没有的条目数,之前的查询如下: SELECT COUNT(NAME)     ...

  8. 【PL/SQL】用星号拼出金字塔

    代码中首先声明了几个变量,然后使用嵌套循环去输出空格和星号,其中: 每层空格数=总层数-该层层数 每层星号数=当前层数*2-1 代码如下: declare v_number1 ); --外层循环控制金 ...

  9. JS高级——缓存原理

    缓存的原理 1.就是将常用的数据存储起来,提供便利,减少查询次数和所消耗的事件 2.利用作用的原理所产生的数据库:非关系型数据库(内存型数据库) MongoDB.Redis等 3.还有网站静态页面缓存 ...

  10. 行动起来：转换传统桌面应用程序到UWP 并发布到Windows 应用商店！

    一个月前微软发布了桌面应用程序转换器(Desktop Application Converter),让我们可以把现有的桌面应用程序(.NET 4.6.1 或 Win32)轻松转换成 通用 Window ...