【小河今学 | JavaScript】关于ScrollTop失效问题

最新推荐文章于 2024-02-28 11:02:30 发布

原创

最新推荐文章于 2024-02-28 11:02:30 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

在使用JavaScript获取滚动条高度时遇到Chrome浏览器兼容性问题，导致ScrollTop始终为0。通过将scrollTop置于window.onscroll事件中并重新设置document.documentElement.scrollTop为0，成功实现了点击按钮返回页面顶部的功能。注意backgroundImage需使用url()包裹图片路径，且回到顶部时不能直接用之前定义的变量赋值，而应直接设置 scrollTop 为0。

8.04 今天在写作业的时候用到ScrollTop来获取滚动条的高度，以达到按按钮后回到顶部的效果。
在写的过程中发现ScrollTop无论如何都为0，后来查了一下好像是因为谷歌浏览器的兼容问题。
解决过程如下：
一开始的代码为：

	// 获取可视窗口的高度
    var viewHeight = document.documentElement.clientHeight;
    // 获取btn
    var toTop = document.getElementById('btn');
    //获取滚动条高度
	var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
    // 当滚动条高度大于可视窗口高度时，显示“回到顶部”标志