返回顶部小火箭
代碼如下：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>body {width: 2000px;}.top{position: fixed;right:50px;bottom:100px;display: none;}</style><script src="my.js" type="text/javascript"></script><script>window.onload = function() {var goTop = $("gotop");window.onscroll = function() {scroll().top > 0 ? show(goTop) : hide(goTop); // 如果大于0 就顯示 否則隱藏leader = scroll().top; // 把 卷去的頭部 給 起始位置 console.log(scroll().top);}var leader = 0,target = 0,timer = null;// leader 起始位置 target 目標位置goTop.onclick = function() {target = 0; // 點擊完畢之后 奔向0 去的 不寫也可以timer = setInterval(function() {leader = leader (target - leader ) / 10;window.scrollTo(0,leader); // 去往頁面中的某個位置if(leader == target){clearInterval(timer);}},20);}}</script> </head> <body> <div id="gotop" class="top"><img src="images/Top.jpg" alt=""/> </div> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> <p>我是內容部分，有很多恩多很多</p> </body> </html>my.js為自己封裝的小插件
/*** Created by andy on 2015/11/19.*/ function $(id) {return document.getElementById(id);} function show(obj) { obj.style.display = "block";} function hide(obj) { obj.style.display = "none";} function scroll() {if(window.pageYOffset != null) // ie9 和其他瀏覽器 {return {left: window.pageXOffset,top: window.pageYOffset}}else if(document.compatMode == "CSS1Compat") // 聲明的了 DTD// 檢測是不是怪異模式的瀏覽器 -- 就是沒有 聲明<!DOCTYPE html> {return {left: document.documentElement.scrollLeft,top: document.documentElement.scrollTop}}return { // 剩下的肯定是怪異模式的 left: document.body.scrollLeft,top: document.body.scrollTop} }?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
- 上一篇： 【前端框架-Vue-基础】$attr及$
- 下一篇： 怎么得到scrollTop