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;