我的 html 文件中有一个滚动到页面顶部按钮的完美工作，带有一个脚本标记。
我已经将文件名更改为 Home.php 并且标签仍然按应有的方式工作，即用户在页面上向下滚动时按钮立即出现，但它现在填满了整个页面底部而不是只出现在右下角。
Home.html 内部应该是什么样子:
但是这是现在在 Home.php 中的样子:
Scrollbar.js 文件
// 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) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").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;
}
以及 Home.php 中的一段代码
<body>
<script type="text/javascript" src="Javascript/ScrollBar.js"></script> <!-- This is linking to my external JavaScript code for the scroll to top of the page button -->
<script type="text/javascript" src="SlideShow.js"></script> <!-- Linking to my external Javascript code for the top middle image slideshow-->
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="cf show-grid">
<div class="row">
<div class="grid-full">
<a href="Index.html"><img class="Logo" src="Images/TLogo.png" alt="Website Logo"></a>
</div>
</div>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
CSS:
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: #eee; /* Set a background color */
color: black; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
}
#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
color: white; /* Text color */
}
最佳答案
我猜某些 CSS 样式覆盖了 #myBtn 中定义的样式。
尝试将以下 CSS 添加到按钮并检查。
#myBtn {
width: auto;
left: auto;
}
关于JavaScript 滚动条看起来不像它应该的样子，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54969927/