2 knoppen met scroll functie, tegelijkertijd laten werken.

Status
Niet open voor verdere reacties.

BigBud

Gebruiker
Lid geworden
26 mrt 2017
Berichten
13
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;
}
 
Niemand een idee? Krijg het met geen mogelijkheid aan het werk..:)

Helaas is er na 14 dagen nog geen oplossing gevonden..:-( Hoop dat alsnog iemand er naar wilt kijken?

Greetz..
 
Laatst bewerkt:
Dit komt omdat de browser slecht 1 keer de window.onscroll onthoudt, en deze is telkens de laatste.

Probeer eens het volgende:

HTML:
<script>

window.onscroll = function() {rootFunction()};

function rootFunction() {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
document.getElementById("rootBtn").style.display = "block";
document.getElementById("topBtn").style.display = "block";
} else {
document.getElementById("rootBtn").style.display = "none";
document.getElementById("topBtn").style.display = "none";
}
}


function homeFunction() {
window.location = '/';
}

function topFunction() {
document.body.scrollTop = 0; // For Chrome, Safari and Opera
document.documentElement.scrollTop = 0; // For IE and Firefox
}
</script>

Dit script zou moeten werken.
 
YES!! Dat was het probleem dus..:) Het werkt nu uitstekend, dank je wel voor de oplossing!! :)

Greetz..
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan