JavaScript scroll bar isn't looking the way it should
Question
I had a perfectly working scroll to the top of page button working, with a script tag in my html file.
I have since changed the file name to Home.php and the tag still works the way it should, ie button to appear as soon as user scrolls down on the page, but it fills the whole bottom of the page now rather than just appear in the bottom right.
What it should look like inside of Home.html:
However this is what it looks like now in Home.php:
The Scrollbar.js file
// 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;
}
and a snippet of the code inside of 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 */
}
2 answers
solution1
1 ACCPTED 2019-03-05 09:19:27
I'm guessing some CSS styles are over-riding the styles defined in #myBtn .
Try adding the following CSS to the button and check.
#myBtn {
width: auto;
left: auto;
}
solution2
0 2019-03-03 14:44:36
将脚本标签放在body标签内代码底部的php文件中，它肯定可以工作...！
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.