Anyone any good at Javascript?

[pdeaves]

I know nothing about Java. What I have on my website is what I have searched for online!

I have two functions that appear to conflict with each other. Individually, they work exactly as required. Together, only one works (which one depending on the order they appear on the page).

The functions are 1) to move the top menu bar according to how the user scrolls, and 2) put a 'return to top' button near the bottom of the page.

I suspect the conflict is something to do with the 'window.onscroll = function()' part, but have no idea what to change to make everything work! I tried making one of them 'function1()', but to no avail.

Do you know how to modify the functions to get them working together?

Thanks!




Top menu script:
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("nav").style.top = "0";
} else {
document.getElementById("nav").style.top = "-35px";
}
prevScrollpos = currentScrollPos;
}
</script>


Top of page script:
<button onclick="topFunction()" id="myBtn" title="Go to top">Top of page</button>
<script>
//Get the button:
mybutton = document.getElementById("myBtn");

// 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) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>

 

[Doctor Fegg]

You're setting window.onscroll in each piece of code, so the second one will overwrite the first.

If you want multiple functions to fire on an event, then do it this way:

window.addEventListener("scroll", function() {
   ...whatever your function is...
});

rather than window.onscroll(function() { ... });

 

[pdeaves]

Thanks. Do I need to use the exact same code both times, or do they need separate names? If so, which bit is the name? As I say, I know almost nothing!

 

[davews]

I think Doctor Fegg has found the bug... and note that Javascript is not Java, you got the right one in the subject line.

 

[pdeaves]

Thanks all, I think I have it sorted now.

I think Doctor Fegg has found the bug... and note that Javascript is not Java, you got the right one in the subject line.

It's all rather confusing to me! Thanks for the clarification.

 

[najaB]

Seems that you only need one event handler (onScroll function) that does both things - use the if() to determine when to add the return to top button.