JS 带运动的返回顶部 小案例

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

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7         <title>6.带运动的返回顶部</title>
 8         <meta name="author" content="Administrator" />
 9         <!-- Date: 2014-12-12 -->
10         <style>
11             #goTop{width:50px;height:50px;border-radius:5px;background:#006666;position:fixed;right:10px;bottom:10px;text-align:center;line-height:50px;}
12         </style>
13         <script>
14             /**滚动条 带运动返回顶部
15              * 运动的值就是  滚动条距离文档顶部的距离,在定时器内获取值
16              * 速度 就是目标点(0-当前的scrollTop)/8
17              * 滚动距离赋值的时候需要连等:
18              * document.documentElement.scrollTop=document.body.scrollTop= iCur +iSpeed**/
19             window.onload=function(){
20                 var oDiv=document.getElementById(‘goTop‘);
21                 var timer=null;
22                 var b=1;
23                 function setTop(){
24                      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
25                 }
26
27                 window.onscroll=function(){
28
29                     if( b!=1 ){ //如果b=1,那么b是被定时器触发的,如果不等,就是被其他事件触发,这个时候就要关掉定时器
30                         clearInterval(timer);
31                     }
32                     b=2
33                 }
34
35                 oDiv.onclick=function(){
36                     clearInterval(timer)
37                       timer=setInterval(function(){
38                               var iCur = document.documentElement.scrollTop || document.body.scrollTop;
39                             var iSpeed = Math.floor((0 - iCur)/8);
40
41                                 document.documentElement.scrollTop=document.body.scrollTop= iCur +iSpeed;
42                             b=1;
43
44                             if(iCur == 0){
45                                 clearInterval(timer)
46                             }
47
48                       },30)
49                 }
50             }
51         </script>
52     </head>
53     <body style="height:2000px;">
54         <div id="goTop">Top</div>
55     </body>
56 </html>

时间: 2024-11-06 03:35:59

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

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

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content

JavaScript返回顶部小案例

<style type="text/css"> body,div{ margin: 0; padding: 0; font-size: 16px; } html,body{ height: 200%; } #div1{ position:fixed; right:0px; bottom:0px; background: red; width: 50px; height: 50px; line-height: 50px; background: yellow; font-si

js返回顶部小Demo

<style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; background-color: #2F4F4F; text-align: center; color: white; position: fixed; right: 18px; bottom: 18px; } .divT:hover{ cursor: pointer; } .hide { display: none; }

JS——给网页添加返回顶部按钮

在页面右下方添加一个返回顶部按钮,当页面滑到一定位置时,按钮出现,否则消失,默认隐藏 代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>返回顶部</title> 6 <style type="text/css"> 7 .content{ wid

运动-模拟返回顶部

第一步:获取底部的那个按钮对象,默认的情况下那个按钮对象是不可见的.可见的条件的是滚轮距离顶部有距离.var oBtn=document.getElementById('btn1'); 第二步:添加滚轮事件.(1). 获取滚轮距离顶部的距离.如果距离大于0,就将按钮对象可见.var scrollT=document.documentElement.scrollTop||document.body.scrollTop;if(scrollT >0){ oBtn.style.display='bloc

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

本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~ 返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置.实现思路也很容易,只要改变document.documentElement.scrollTop或document.body.scrollTop的值即可.本文抛弃所有加速减速的酷炫效果,回归软件的本质,提供一个最简洁的实现,只追求实用性,不追求所谓的用户体验,效果

原生js实现缓动返回顶部

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ width: 1366px; height: 2000px; position: absolute; background-color

jquery小demo——返回顶部

此文闲来无事写了个返回顶部小demo,当文档高度大于窗口高度时,返回顶部按钮显示,否则隐藏. 具体代码见下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

使用jQuery实现返回顶部功能

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可