javascript滚动到顶部scrollTop用法
首先了解下列相关属性
网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
scrollHeight 获取对象的滚动高度。
scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth 获取对象的滚动宽度
offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
要获取当前页面的滚动条纵坐标位置，用：
document.documentElement.scrollTop;
window.pageYOffset IE9支持
而不是：
document.body.scrollTop;
浏览器兼容性问题
- IE6/7/8：没有doctype声明的html文档使用
document.body.scrollTop，否则使用document.documentElement.scrollTop。这些版本的浏览器中window.pageYOffset属性是undefined，因此无效。 - Google Chrome，Firefox，IE9+: document.body.scrollTop 和
document.documentElement.scrollTop 使用方式同上，但window.pageYOffset
无论doctype是否声明，浏览器都可以识别。 - Safari: 浏览器特殊，目前只有window.pageYOffset有效。
处理兼容性代码
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
JS滚动屏幕到顶端的几种方法
-
document.documentElement.scrollTop = 0 / document.body.scrollTop = 0
-
scrollTo(0,0) 一般用于相对于整个页面来说
-
scrollBy(x,y) 一般用于相当于当前元素的滚动 ，可以传入当前元素相对于顶端的值，即document.documentElement.scrollTop
-
scrollIntoView()和要跳转的元素绑定，使元素进入视口
scrollIntoView()
document.getElementById("regRater").scrollIntoView(true);
document.querySelector("#regRater").scrollIntoView(true);
var anchor = this.$el.querySelector("#regRater");
document.body.scrollTop = anchor.offsetTop;
滚动到顶部（瞬间）
window.scrollTo(0, 0)
//或者通过a链接锚点的方式
<a href="#top">返回顶部</a>
滚动到顶部（过度效果）
var timer= setInterval(function () {
if (document.documentElement.scrollTop != 0) {
document.documentElement.scrollTop -= 100;
} else {
clearInterval(timer);
}
}, 10);
在vue中实现滚动带动画
<div>
<p @click="backtop">回到顶部<p>
</div>
<script>
export default {
mounted() {
window.addEventListener("scroll",this.showbtn,true);
},
methods: {
// 显示回到顶部按钮
showbtn(){
let that = this;
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
that.scrollTop = scrollTop
},
/**
* 回到顶部功能实现过程：
* 1. 获取页面当前距离顶部的滚动距离（虽然IE不常用了，但还是需要考虑一下兼容性的）
* 2. 计算出每次向上移动的距离，用负的滚动距离除以5，因为滚动的距离是一个正数，想向上移动就是做一个减法
* 3. 用当前距离加上计算出的距离，然后赋值给当前距离，就可以达到向上移动的效果
* 4. 最后记得在移动到顶部时，清除定时器
*/
backtop(){
var timer = setInterval(function(){
let osTop = document.documentElement.scrollTop || document.body.scrollTop;
let ispeed = Math.floor(-osTop / 5);
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
this.isTop = true;
if(osTop === 0){
clearInterval(timer);
}
},30)
}
}
}
</script>
使用 jQuery 实现
能使用原生JS实现的也就能使用jquery实现，只不过我认为为了实现一个小功能，再引入一个框架有点不划算，但如果你是使用jquery写的项目，就可以使用以下的方法实现
<div>
<p id="backtop">回到顶部</p>
</div>
<script>
function backtop(minHeight){
// 获取页面最小高度，如果没有传入值就默认600
minHeight ? minHeight = minHeight : minHeight = 600
// 为当前页面绑定滚动事件
$(window).scroll(function() {
// 获取页面滚动高度
let osTop = $(window).scrollTop();
// 如果滚动高度大于页面视口高度，就渐显图标，否则就渐隐图标
if(osTop > minHeight){
$("#backtop").fadeIn(500);
}else {
$("#backtop").fadeOut(500);
}
})
// 定义回到顶部动画
$("#backtop").click(
function(){$('html,body').animate({scrollTop:'0px'},'slow');
)}
</script>