时间戳

首页 > 解决方案 > topfunction 未定义

javascript - topfunction 未定义

问题描述

嗨，我想做一个滚动，当我滚动时，我的按钮出现了，我可以单击并返回顶部，但我有一个错误说：Topfunction is not defined我不知道为什么它不起作用。那里有我的代码，所以如果你能帮助我，那就太好了！它是一个学校项目！

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

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

function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#monBoutton {
  /*display: none;*/
  position: fixed;
  bottom: 20px;
  right: 50%;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  color:#df5791;
  /*color: white;*/
  cursor: pointer;
  /*padding: 15px;*/
  /*border-radius: 4px;*/
    background-color: #ffffff00;
}

#monBoutton:hover {
  transform:  scale(2);
}


::-webkit-scrollbar {
	/*height: 10px;*/
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    /*box-shadow: inset 0 0 0px grey; */
    /*border-radius: 20px;*/
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: pink; 
    border-radius:20px;
    /*box-shadow: inset 0 0 6px rgba(0,0,0,0.5);*/
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="scrolldown.css">
<link rel="stylesheet" type="text/javascript" href="debut.js">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
    
</head>
<body>

<button onclick="topFunction()" id="monBoutton" title="Go to top">
        <i class="fa fa-chevron-up"></i>
</button>

<div style="background-color:black;color:white;padding:30px">Scroll</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>


</body>
</html>

标签： javascripthtmlcss

解决方案

您的代码确实有效。例如，如果您单击“运行片段”，您会注意到该函数被触发。

获得“未定义函数”错误肯定意味着无论函数在哪里，都无法找到它。您是否将其放在单独的文件中，并且可能缺少导入？

推荐阅读