Sticky Top on Scroll

The implementation originally on the Parish Council website was a Top of page on the fixed bottom, bar menu. While this display of the button (menu item) worked well I needed to write a function to hide the menu item after the menu item was clicked.

The code for the onscroll Event was taken from the W3C example and I have another example where the W3C code is demonstrated.

What I trying to do here

Is to have a "Go-to-top" button that is both sticky and initially hidden until the screen is scrolled by a determined amount

The control code for the button

The script that I developed for the Parish Counil page was a combination of the code for the conditional display of the Hamburger Menu on the Fixed Bottom Menu template. The link here is to an old layout but it shows the operation of the bottom menu and the hamburger when viewed on a mobile.

The script is a little more complex than the one I first tried on this page. The logic involves a Logical OR and the === operator. The code is deconstructed bere

The logic for the second scroll test page contains code that I have not yet tried to decode. The Javascript that manipulates the Document Object uses a document.object variable and then re-assigns the variable.className to a new value.

The getElementById() method is used to assign the variable x and this is compared to the value for a hidden and a displayed object.

The === Operator

freecodecamp.org say: