zoukankan      html  css  js  c++  java
  • Day6--------smoothScroll

     //--------兼容版本的平滑滚动效果
    //-------------使用百分比减值达到平滑的效果,使用body.scrollTop||documentElement.scrollTop检测浏览器内核,使用bySys检测用户的滚动行为
    1
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>smoothScroll</title> 6 </head> 7 <style type="text/css"> 8 #returnTop{position: fixed;bottom: 40px;right: 40px;} 9 </style> 10 <script type="text/javascript"> 11 window.onload=function(){ 12 var i=0; 13 var timer=null; 14 var bySys=true; 15 oUl=document.getElementsByTagName('ul')[0]; 16 oBtn=document.getElementsByTagName('input')[0]; 17 for(i=0;i<10;i++){ 18 oUl.innerHTML+=oUl.innerHTML; 19 } 20 window.onscroll=function(){ 21 if(!bySys) clearInterval(timer); 22 bySys=false; 23 } 24 oBtn.onclick=function(){ 25 if(document.body.scrollTop){ 26 timer=setInterval(function(){ 27 bySys=true; 28 document.body.scrollTop-=Math.ceil(0.2*document.body.scrollTop); 29 if(document.body.scrollTop==0) clearInterval(timer); 30 },30); 31 } 32 if(document.documentElement.scrollTop){ 33 timer=setInterval(function(){ 34 bySys=true; 35 document.documentElement.scrollTop-=Math.ceil(0.2*document.documentElement.scrollTop); 36 if(document.documentElement.scrollTop==0) clearInterval(timer); 37 },30); 38 } 39 } 40 } 41 </script> 42 <body> 43 <ul> 44 <li>111</li> 45 </ul> 46 <input type="button" value="returnTop" id="returnTop" /> 47 </body> 48 </html>
  • 相关阅读:
    js中实现继承的几种方式
    js中prototype,__proto__,constructor之间的关系
    圣杯布局
    BFC详解
    Altium制作DC002的PCB封装和3D模型
    直流供电电路中,关于电源并联二极管、电容作用的思考与总结
    AltiumDesigner17快捷键
    AltiumDesigner17学习指南
    AltiumDesigner元器件搜索中英文对照
    智慧树自动刷课脚本
  • 原文地址:https://www.cnblogs.com/fleshy/p/4122219.html
Copyright © 2011-2022 走看看