js浏览器回到顶部方法_js 返回顶部按钮

要求：当鼠标从顶部滚动后，显示返回顶部按钮，点击按钮，页面平滑滚动到顶部，按钮隐藏。

1.css

#scrollTop{position:fixed;bottom:20px;right:20px;height:0px;width:45px;line-height:45px;text-align:center;background-color:rgba(0,0,0,.7);color:#fff;font-weight:600;border-radius:45%;font-size:13px;transition:.5s all;

}

2.js

varscrolltop=document.getElementById("scrollTop");

scrolltop.οnclick= function(){//alert("111");

//document.scrollingElement.scrollTop = 0;

//window.scrollTo(0,0);

window.scrollTo({ top:0, behavior:"smooth"});

}

window.οnscrοll= function(){varscrollTop1=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;if(scrollTop1> 0) {//scrolltop.style.width = 45 + 'px';

scrolltop.style.height= 45 + 'px';

}else{//scrolltop.style.width = 0 + 'px';

scrolltop.style.height= 0 + 'px';

}

}

解释：

1.position : fixed; 以浏览器窗口绝对定位

2. 返回顶部方法

① document.scrollingElement.scrollTop = 0 ;   //垂直滚动到顶部

② window.scrollTop(0,0)  //垂直滚动到顶部

③  window.scrollTop(options);

top: 相当于y轴坐标；

left: 相当于x轴坐标；

behavior:类型string，表示滚动行为，支持smooth(平滑滚动),instant(瞬间滚动), 默认值是auto，等同于instant

window.scrollTo({top:1000,

behavior: "smooth"});

3. 当滚动条滚动的距离大于零时，设置按钮高度，否则高度为零(不显示)

获取scrollTop：

①各浏览器下 scrollTop的差异

IE6/7/8：

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

对于有doctype声明的页面则可以使用 document.documentElement.scrollTop；

Safari:

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

Firefox:

火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ；

②完美获取

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

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

window.pageYOffset (Safari) 被放置在 || 的中间位置。

因为当 数字0 与 undefine 进行 或运算时，系统默认返回最后一个值。即或运算中 0 || undefine ;返回的是underfine。

当页面滚动条刚好在最顶端，即scrollTop值为 0 时。 IE 下 window.pageYOffset (Safari) 返回为 undefine ，此时将window.pageYOffset (Safari) 放在或运算最后面时， var scrollTop= 0 || 0 || undefine =underfine ,这样用在接下去的运算就会报错咯。

而其他浏览器 无论 scrollTop 赋值或运算顺序如何都不会返回 undefine. 可以安全使用..

所以 window.pageYOffset 要放中间 如下：

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