如何修改JavaScript返回顶部按钮，使其仅在滚动后显示？

问题根源是页面首次加载时，scrollFunction函数未被执行，按钮保持默认的display: block状态，导致一打开页面就显示。以下两种方法均可修复：

方法1：用CSS设置按钮初始隐藏 #

直接给按钮添加初始隐藏样式，让页面加载时默认不显示，只有滚动到指定距离后才会被JS切换为显示：

#button {
    display: none;
}

你可以把这段代码放在页面的<style>标签里，或者外部样式文件中。

方法2：页面加载时主动调用判断函数 #

在JavaScript代码末尾添加一行，让页面加载完成后立刻执行一次scrollFunction，触发初始状态判断：

var myButton = document.getElementById("button");

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        myButton.style.display = "block";
    }
    else {
        myButton.style.display = "none";
    }
}

function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

// 页面加载完成后执行一次判断，初始隐藏按钮
scrollFunction();

两种方法任选其一即可解决问题。

内容的提问来源于stack exchange，提问作者Patricia Cosma