I am a beginner in programming and I wanted to create two buttons for my webpage. One button should appear when the page is scrolled more than 300px and take the user to the top, while the other button should be displayed immediately and scroll the user to the bottom.
After some trial and error, I managed to implement a button that scrolls the user down using Javascript. However, when I tried to add the second button, only the last button was displayed on the HTML page.
<div id="TotopButton">^<span id="test"></span></div>
<div id="ToDownButton">^<span id="test2"></span></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br...
CSS
#TotopButton
{
background-color: red;
color: black;
font-size: 35px;
padding:10px;
position:fixed;
bottom:15px;
right:15px;
height: 50px;
width: 150px;
border:1px solid black;
text-align: center;
display:none;
}
#TotopButton:hover
{
color:white;
cursor:pointer;
}
#ToDownButton
{
Background-color: blue;
color: black;
font-size:35px;
padding:10px;
position:fixed;
bottom:15px;
left:15px;
height:50px;
width:150px;
border: 1px solid black;
text-align: center;
display: none;
}
#ToDownButton:hover
{
color:white;
cursor:pointer;
}
Javascript
window.onload = function()
{
var TotopButton = document.getElementById("TotopButton");
var test = document.getElementById("test");
window.onscroll = function ()
{
var TotopButton = document.getElementById("TotopButton");
var yScrollAxis = window.pageYOffset;
var test = document.getElementById("test");
if (yScrollAxis > 300)
{
TotopButton.style.display = 'block'
}
else
{
TotopButton.style.display = 'none'
}
test.innerHTML = " " + window.pageYOffset
}
TotopButton.onclick = function()
{
window.scrollBy(0, -1 * window.pageYOffset);
}
};
//Second button
window.onload = function()
{
var ToDownButton = document.getElementById("ToDownButton");
var test2 = document.getElementById("test2");
window.onscroll = function()
{
var ToDownButton = document.getElementById("ToDownButton");
var yScrollAxis = window.pageYOffset;
var test2 = document.getElementById("test2");
if (yScrollAxis > 50)
{
ToDownButton.style.display = 'block'
}
else
{
ToDownButton.style.display = 'none'
}
test2.innerHTML = " " + window.pageYOffset
}
ToDownButton.onclick = function()
{
window.scrollBy(0, 1000 * window.pageYOffset);
}
};