我创建了一个数据库来向用户显示信息。我决定把一个"；到页面的顶部"；按钮来帮助我的用户滚动到页面的顶部。当我使用<script>标签时，它工作得很好，但我决定清理它(希望像专业人士一样编码(并创建一个外部js文件夹，但当我这样做时，它停止了工作。当我向下滚动页面时，我再也看不到按钮了。我对剧本没有什么经验，所以任何帮助都非常感谢。
<head>
<link rel="stylesheet" href="styles.css">
<script src="/js/top.js"></script>
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="Go to top">Return to Top</button>
js外部文件-top.js
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the 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";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
在myButton位于DOM之前包含script，因此对document.getElementById("myBtn");的调用返回undefined。您应该在页面末尾包含<script>标记(就在</html>之前(，这样在您尝试执行任何操作之前，所有DOM都已加载。
还有其他方法，例如
document.addEventListener('DOMContentLoaded', function() {
// your code here
})
只会在加载DOM内容后运行您的代码。
我一直在玩它，并接受了上面提到的建议(谢谢(。它现在正在工作。我将<button>和<script>标记移到了</body标记之前。
<button onclick="topFunction()" id="myBtn" title="Go to top">Return to Top</button>
<script src="js/top.js" defer></script>