js返回顶部
html 代码：
| 代码如下 | 复制代码 |
|
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-回到顶部</title> <style type="text/css"> *{margin:0;padding:0;} .wrapper{width:960px;margin-left:auto;margin-right:auto;} p{margin:10px;line-height:30px;} #top{position:fixed;right:130px;bottom:50px;background:gray;padding:5px;display:block;} </style> </head> <body> <p>“记事本”是一个用来创建简单的文档的基本的文本编辑器。“记事本”最常用来查看或编辑文本 (.txt) 文件，但是许多用户发现“记事本”是创建网页的简单工具。</p> <a href="javascript:;" id="top">回到顶部</a> </body> </html> <script type="text/javascript" src="js/toTop.js"></script> <script type="text/javascript"> window.onload = function(){ toTop('top',false); } </script> |
|
toTop.js 代码：
//第一个参数是按钮id；第二个参数是一个布尔值，true是一直显示按钮，false是当滚动距离不为0时，显示按钮
function toTop(id,show){
var oTop = document.getElementById(id);
var bShow = show;
if(!bShow){
oTop.style.display = 'none';
setTimeout(btnShow,50);
}
oTop.onclick = scrollToTop;
function scrollToTop(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var iSpeed = Math.floor(-scrollTop/2);
if(scrollTop <= 0){
if(!bShow){
oTop.style.display = 'none';
}
return;
}
document.documentElement.scrollTop = document.body.scrollTop = scrollTop + iSpeed;
setTimeout(arguments.callee,50);
}
function btnShow(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop <= 0 ){
oTop.style.display = 'none';
}else{
oTop.style.display = 'block';
}
setTimeout(arguments.callee,50);
}
}
注意：
ie6 下 position:fixed 无效
解决办法
| 代码如下 | 复制代码 |
|
/*解决ie6下position:fixed失效*/ *html,*body{height:100%;overflow-x:hidden;overflow-y:auto;} .container{position:relative;width:100%;height:100%;overflow:auto;} .box{position:fixed;left:150px;top:150px;background:red;width:100px;height:100px;} *html .box{position:absolute;} |
|
测试浏览器：chrome,firefox,safari,ie8,ie7,ie6,opera
jquery返回顶部
具体代码如下：
| 代码如下 | 复制代码 |
|
$(function(){ $(window).scroll(function () { if ($(this).scrollTop() > 500) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } }); $("#toTop").click(function(){ $("html,body").animate({scrollTop:0},"slow"); return false; }); }); |
|
我们可以看出 jquery 的代码比起原生 javascript 的代码要少很多,在使用 jquery 的同时，别忘了需要引用 jquery 库