带运动的返回顶部：当滚动条在滚动的时候,滚动鼠标的滚轮,应该让滚动条停止滚动,清掉定时器。下面的方法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. 【转】 [MySQL 查询语句]——分组查询group by

    group by (1) group by的含义:将查询结果按照1个或多个字段进行分组,字段值相同的为一组(2) group by可用于单个字段分组,也可用于多个字段分组 select * from ...

  2. Netty编解码技术和UDP实现

    背景 作为网络传输框架,免不了传输对象,对象在传输之前就要序列化,这个序列化的过程就是编码过程.接收到编码后的数据就需要解码,还原传输的数据. 编解码技术就是java序列化技术,序列化的目的有两个,一 ...

  3. c++ 四种类型转换机制

    类型转换机制可以分为:隐式类型转换 和 显示类型转换(强制类型转换) C中的类型转换: 事情要从头说起,这个头就是C语言.我们已经习惯了使用C-like类型转换,因为它强大而且简单. 主要有一下两种形 ...

  4. WPF PasswordBox MVVM 实现

    由于PasswordBox.Password属性非依赖属性,所以不能作为绑定的目标,以下是本人的MVVM实现方法. PasswordBox.Password与TextBox.Text同步,TextBo ...

  5. xcode常用的快捷键

    按键 描述 command+［ 左移代码块 command+］ 右移代码块 Tab键 接受代码自动完成提示 Esc键 显示代码提示菜单 command+方向left键 移动光标到本行行首 comman ...

  6. Python随笔-函数

    在Python中,定义一个函数要使用def语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用return语句返回. def GetMax(v1, v2):#注 ...

  7. C#入门经典 Chapter5 变量的更多内容

    5.1类型转换 1.类型转换 1.1隐式转换:所有情况下可进行,编译器执行转换. 1.2显示转换 强制转换:强迫数据从一种类型转换为另一种类型. (<destinationType>)&l ...

  8. JS高级——闭包练习

    从上篇文章我们知道与浏览器的交互操作如鼠标点击,都会被放入任务队列中,而放入到任务队列中是必须等到主线程的任务都执行完之后才能执行,故而我们有时利用for循环给dom注册事件时候,难以获取for循环中 ...

  9. CSS——精灵图与背景图片定位

    精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...

  10. Android ExpandableListView的使用详解

    ExpandableListView(可扩展的ListView) ExpandableListVivew是ListView的子类,它在普通ListView的基础上进行了扩展,它把应用中的列表项分为几组 ...