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

最新推荐文章于 2023-04-27 16:07:20 发布

LB_laber

最新推荐文章于 2023-04-27 16:07:20 发布

阅读量1.8k

点赞数 2

分类专栏：小河今学文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/LB_laber/article/details/126168563

版权

小河今学专栏收录该内容

27 篇文章 4 订阅

订阅专栏

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

	// 获取可视窗口的高度
    var viewHeight = document.documentElement.clientHeight;
    // 获取btn
    var toTop = document.getElementById('btn');
    //获取滚动条高度
	var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
    // 当滚动条高度大于可视窗口高度时，显示“回到顶部”标志
    if(scrollHeight >= viewHeight){
        toTop.style.display = 'block';
    }else{
        toTop.style.display = 'none';
    }
    // 点击按钮后图标改变，并且回到最上边
    toTop.onclick = function() {
        toTop.style.backgroundImage = 'url("/images/huojian2.jpg")';
        document.documentElement.scrollTop = 0;
    }

解决代码如下：

    // 获取可视窗口的高度
    var viewHeight = document.documentElement.clientHeight;
    // 获取btn
    var toTop = document.getElementById('btn');
    window.onscroll = function() {
		//获取滚动条到顶部的垂直高度
		var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
        // 当滚动条高度大于可视窗口高度时，显示“回到顶部”标志
        if(scrollHeight >= viewHeight){
            toTop.style.display = 'block';
        }else{
            toTop.style.display = 'none';
        }
        // 点击按钮后图标改变，并且回到最上边
        toTop.onclick = function() {
            toTop.style.backgroundImage = 'url("/images/huojian2.jpg")';
            document.documentElement.scrollTop = 0;
        }
    }