标签：一个 col 头部 tle 技术分享 gen ret lock blog
样式：
1 <style> 2 body{ 3 width: 100%; 4 height: 3000px; 5 } 6 .top_btn{ 7 width: 50px; 8 height: 50px; 9 position: fixed; 10 bottom: 50px; 11 right: 50px; 12 margin: 0; 13 } 14 .top_btn .topLink{ 15 height: 50px; 16 width: 50px; 17 display: block; 18 opacity: .35; 19 background: url("img/bg2.png") 0 -600px no-repeat; 20 } 21 .top_btn .topLink:hover{ 22 opacity: .6; 23 } 24 </style>
1、锚点
利用a标签的name属性与herf属性
1 <body> 2 <a name="123"></a> <!--顶部--> 3 4 <div class="top_btn" id="toTop" style="visibility: visible"> 5 <a href="#123" class="topLink" title="返回顶部"></a> 6 </div> 7 8 </body>
但，在现代浏览器中，如果浏览器找不到指定的锚点(例如123
)，浏览器将会尝试跳转到id为123
的HTML元素的起始位置。因此，我们也可以在头部放置一个id为123的HTML元素，不过，并不是所有的浏览器（尤其是某些浏览器的旧版本）都兼容这种行为。
2、利用scrollTop（已滚动的高）
1 <body> 2 3 <div class="top_btn" id="toTop" style="visibility: visible"> 4 <a href="javaScript:;" class="topLink" title="返回顶部"></a> 5 </div> 6 7 </body>
1 <script> 2 3 window.onload = function () { 4 5 //区分浏览器内核（由于谷歌浏览器不识别documentElement，但是它识别body） 6 function isChrome() { 7 var nu = navigator.userAgent; //获取浏览器内核 8 if(nu.match(/chrome/i)){//匹配 9 return true; 10 }else{ 11 return false; 12 } 13 } 14 15 // 16 var oTop = document.getElementById(‘toTop‘); 17 oTop.onclick = function () { 18 if(isChrome()){ 19 document.body.scrollTop = 0; 20 }else{ 21 document.documentElement.scrollTop = 0; 22 } 23 } 24 25 } 26 </script>
3、利jQuery的scrooll()方法
1 <a href="javaScript:scroll(0,0);" class="topLink" title="返回顶部"></a>
不过以上方式都是直接跳到顶部，没有一个过程
3、缓缓的跳转至顶部----利用定时器
1 <script> 2 3 window.onload = function () { 4 5 var oTop = document.getElementById(‘toTop‘); 6 var isTop = true; //判断是否到达顶部 7 var timer = null; //定时器 8 9 window.onscroll = function () { 10 var top = document.body.scrollTop || document.documentElement.scrollTop; 11 document.title = top; 12 if (top > 100) { 13 oTop.style.display = ‘block‘; 14 } else { 15 oTop.style.display = ‘none‘; 16 } 17 18 if (!isTop) { //当点击回到顶部按钮后,滚动条在回滚过程中，若手动滚动滚动条，则清除定时器 19 clearInterval(timer); 20 } 21 isTop = false; 22 }; 23 24 25 //回到顶部 26 oTop.onclick = function () { 27 28 29 timer = setInterval(function(){ 30 var top = document.body.scrollTop || document.documentElement.scrollTop; 31 var speed = -30; 32 document.documentElement.scrollTop = document.body.scrollTop = top + speed; 33 isTop =true; //用于阻止滚动事件清除定时器 34 if(top <= 0){ 35 clearInterval(timer); 36 } 37 },30); 38 39 }; 40 } 41 42 </script>
注意作用域
标签：一个 col 头部 tle 技术分享 gen ret lock blog
原文地址：http://www.cnblogs.com/niul-zhp/p/7608133.html
