Question

我滚动到页面顶部的按钮时工作正常，并且在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 */
}

Answer 1

我猜想有些CSS样式会覆盖#myBtn中定义的样式。

尝试将以下CSS添加到按钮并进行检查。

#myBtn {
    width: auto;
    left: auto;
}

Answer 2

将script标记放在body标记内代码底部的php文件中，它肯定可以工作...！

JavaScript滚动条没有看起来应该的样子

2 个答案: