G'Day All,
Ik probeer 2 knoppen met de scrollTop functie van Javascript tegelijk werkende te krijgen, maar het lukt me niet.
De ene knop zorgt ervoor dat ik na het aanklikken van de knop, terug naar de top kan gaan en de andere idem, maar dan terug naar de root.
Allebei de scripts werken goed, maar zodra ik ze beide onder elkaar plaatst, zoals je beneden kan zien, doet alleen het onderste script het, verwissel ik de scripts van positie blijft altijd de onderste het doen.
Ik moet ergens overheen kijken, maar wat?
Hoop dat er iemand is die mij een duidelijk antwoord kan geven?
Hieronder dus mijn voorbeelden zoals ik ze gebruik:
<!--HTML-gedeelte:-->
<html>
<body>
<button onclick="homeFunction()" id="rootBtn" title="Back to Home">Back to Home</button>
<button onclick="topFunction()" id="topBtn" title="Back to top">Back to top</button>
<!--Javascript-gedeelte:-->
<script>
window.onscroll = function() {rootFunction()};
function rootFunction() {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
document.getElementById("rootBtn").style.display = "block";
} else {
document.getElementById("rootBtn").style.display = "none";
}
}
function homeFunction() {
window.location = '/';
}
</script>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
document.getElementById("topBtn").style.display = "block";
} else {
document.getElementById("topBtn").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0; // For Chrome, Safari and Opera
document.documentElement.scrollTop = 0; // For IE and Firefox
}
</script>
</body>
</html>
<!--CSS-gedeelte:-->
#topBtn {
display: none;
position: fixed;
font-size: 10px;
width: 45px;
bottom: 10px;
right: 18.6%;
z-index: 99;
border: none;
outline: none;
background-color: blue;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 57%;
}
#topBtn:hover {
background-color: red;
}
#rootBtn {
display: none;
position: fixed;
font-size: 10px;
width: 45px;
bottom: 10px;
left: 18.6%;
z-index: 99;
border: none;
outline: none;
background-color: blue;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 57%;
}
#rootBtn:hover {
background-color: red;
}
Ik probeer 2 knoppen met de scrollTop functie van Javascript tegelijk werkende te krijgen, maar het lukt me niet.
De ene knop zorgt ervoor dat ik na het aanklikken van de knop, terug naar de top kan gaan en de andere idem, maar dan terug naar de root.
Allebei de scripts werken goed, maar zodra ik ze beide onder elkaar plaatst, zoals je beneden kan zien, doet alleen het onderste script het, verwissel ik de scripts van positie blijft altijd de onderste het doen.
Ik moet ergens overheen kijken, maar wat?
Hoop dat er iemand is die mij een duidelijk antwoord kan geven?
Hieronder dus mijn voorbeelden zoals ik ze gebruik:
<!--HTML-gedeelte:-->
<html>
<body>
<button onclick="homeFunction()" id="rootBtn" title="Back to Home">Back to Home</button>
<button onclick="topFunction()" id="topBtn" title="Back to top">Back to top</button>
<!--Javascript-gedeelte:-->
<script>
window.onscroll = function() {rootFunction()};
function rootFunction() {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
document.getElementById("rootBtn").style.display = "block";
} else {
document.getElementById("rootBtn").style.display = "none";
}
}
function homeFunction() {
window.location = '/';
}
</script>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
document.getElementById("topBtn").style.display = "block";
} else {
document.getElementById("topBtn").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0; // For Chrome, Safari and Opera
document.documentElement.scrollTop = 0; // For IE and Firefox
}
</script>
</body>
</html>
<!--CSS-gedeelte:-->
#topBtn {
display: none;
position: fixed;
font-size: 10px;
width: 45px;
bottom: 10px;
right: 18.6%;
z-index: 99;
border: none;
outline: none;
background-color: blue;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 57%;
}
#topBtn:hover {
background-color: red;
}
#rootBtn {
display: none;
position: fixed;
font-size: 10px;
width: 45px;
bottom: 10px;
left: 18.6%;
z-index: 99;
border: none;
outline: none;
background-color: blue;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 57%;
}
#rootBtn:hover {
background-color: red;
}