js浏览器回到顶部方法_JavaScript实现回到顶部

HTML页面使用一个a标签，href内填写JavaScript:;以阻止默认行为，在学习实例的时候添加一个大的div来充实页面。

demo：

其css代码为：

#btn{

display: none;

position: fixed;

left: 90%;

bottom: 40px;

height:60px;

width: 60px;

background: url(img/22.ico) no-repeat left top;

background-size:100% auto;

border: solid 1px red;

border-radius: 5px;

}

补充几句话：

CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)

4.背景(background, border等)

5.其他(animation, transition等)

给回到顶部一个美化，红色边框让你更容易看到它。

JavaScript部分代码：

window.onload = function(){//获取相关

var mybtn = document.getElementById("btn");var Time1 = null;var isTop = true;

mybtn.οnclick= function(){//设置定时器

Time1 = setInterval(function(){var osTop = document.body.scrollTop||document.documentElement.scrollTop;//ceil向上取整，floor向下取整

var speed = Math.ceil(osTop/2);

//做一个变换速度的回到顶部效果

document.body.scrollTop = document.documentElement.scrollTop = osTop -speed;if(osTop <= 0){//清除定时器

clearInterval(Time1);

}

isTop= true;

},100)

}//页面滚动自动触发：

window.onscroll = function(){//获取页面可视区高度和滚动高度

var osTop = document.body.scrollTop||document.documentElement.scrollTop;//这两个获取滚动的方法可以兼容多种浏览器

var clientHeight =document.documentElement.clientHeight;//对回到顶部的隐藏和显示，在css中一开始可以设置为隐藏

if (osTop>clientHeight) {

mybtn.style.display= "block"}else{

mybtn.style.display= "none"}if (!isTop) {

clearInterval(Time1);

}

isTop= false;

}

}

另外补充：

1、各浏览器下 scrollTop的差异IE6/7/8：

对于没有doctype声明的页面里可以使用  document.body.scrollTop来获取 scrollTop高度；对于有doctype声明的页面则可以使用 document.documentElement.scrollTop；Safari:

safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset ；Firefox:

火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ；2、获取scrollTop值完美的获取scrollTop 赋值短语 ：

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通过这句赋值就能在任何情况下获得scrollTop 值。

最后说明：

本人学习来自百度搜索，祝大家利用好网络搜索。