标签：log val return ret head type returns htm bsp
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 list-style: none; 12 border: none; 13 } 14 15 body { 16 background-color: #ccc; 17 } 18 19 p { 20 margin-bottom: 20px; 21 text-align: center; 22 } 23 24 #top { 25 width: 43px; 26 height: 43px; 27 background: url("images/top.png") no-repeat; 28 background-size: 100% 100%; 29 position: fixed; 30 right: 10px; 31 bottom: 30px; 32 display: none; 33 } 34 </style> 35 </head> 36 37 <body> 38 <span id="top"></span> 39 <div> 40 <p>今天天气很好!</p> 41 <p>今天天气很好!</p> 42 <p>今天天气很好!</p> 43 <p>今天天气很好!</p> 44 <p>今天天气很好!</p> 45 <p>今天天气很好!</p> 46 <p>今天天气很好!</p> 47 <p>今天天气很好!</p> 48 <p>今天天气很好!</p> 49 <p>今天天气很好!</p> 50 <p>今天天气很好!</p> 51 <p>今天天气很好!</p> 52 <p>今天天气很好!</p> 53 <p>今天天气很好!</p> 54 <p>今天天气很好!</p> 55 <p>今天天气很好!</p> 56 <p>今天天气很好!</p> 57 <p>今天天气很好!</p> 58 <p>今天天气很好!</p> 59 <p>今天天气很好!</p> 60 <p>今天天气很好!</p> 61 <p>今天天气很好!</p> 62 <p>今天天气很好!</p> 63 <p>今天天气很好!</p> 64 <p>今天天气很好!</p> 65 <p>今天天气很好!</p> 66 <p>今天天气很好!</p> 67 <p>今天天气很好!</p> 68 <p>今天天气很好!</p> 69 <p>今天天气很好!</p> 70 <p>今天天气很好!</p> 71 <p>今天天气很好!</p> 72 <p>今天天气很好!</p> 73 <p>今天天气很好!</p> 74 <p>今天天气很好!</p> 75 <p>今天天气很好!</p> 76 <p>今天天气很好!</p> 77 <p>今天天气很好!</p> 78 <p>今天天气很好!</p> 79 <p>今天天气很好!</p> 80 <p>今天天气很好!</p> 81 <p>今天天气很好!</p> 82 <p>今天天气很好!</p> 83 <p>今天天气很好!</p> 84 <p>今天天气很好!</p> 85 <p>今天天气很好!</p> 86 <p>今天天气很好!</p> 87 <p>今天天气很好!</p> 88 <p>今天天气很好!</p> 89 </div> 90 <script src="js/myFunc.js"></script> 91 <script> 92 window.onload = function () { 93 // 0. 变量 94 var scroll_top = 0, begin = 0, end = 0, timer = null; 95 96 // 1. 监听窗口的滚动 97 window.onscroll = function () { 98 // 1.1 获取滚动的高度 99 scroll_top = scroll().top; 100 // 1.2 显示和隐藏 101 scroll_top > 0 ? show($(‘top‘)) : hide($(‘top‘)); 102 begin = scroll_top; 103 //console.log(begin) 104 }; 105 106 // 2. 监听点击 107 $("top").onclick = function () { 108 // 2.1 清除定时器 109 clearInterval(timer); 110 111 // 2.2 开启缓动动画 112 timer = setInterval(function () { 113 begin = begin + (end - begin) / 20; 114 window.scrollTo(0, begin); ///水平 垂直 115 116 // 2.3 清除定时器 117 console.log(begin, end);//end 0 begin c从大到小 118 if (Math.round(begin) === end) { 119 clearInterval(timer); 120 } 121 }, 20); 122 } 123 } 124 </script> 125 </body> 126 127 </html>
1 /** 2 * 获取滚动的头部距离和左边距离 3 * scroll().top scroll().left 4 * @returns {*} 5 */ 6 function scroll() { 7 if(window.pageYOffset !== null){ 8 return { 9 top: window.pageYOffset, 10 left: window.pageXOffset 11 } 12 }else if(document.compatMode === "CSS1Compat"){ // W3C 13 return { 14 top: document.documentElement.scrollTop, 15 left: document.documentElement.scrollLeft 16 } 17 } 18 19 return { 20 top: document.body.scrollTop, 21 left: document.body.scrollLeft 22 } 23 } 24 25 26 function $(id) { 27 return typeof id === "string" ? document.getElementById(id) : null; 28 } 29 30 31 function show(obj) { 32 return obj.style.display = ‘block‘; 33 } 34 35 function hide(obj) { 36 return obj.style.display = ‘‘; 37 }
标签：log val return ret head type returns htm bsp
原文地址：https://www.cnblogs.com/zhangzhengyang/p/11210705.html
