Scroll to Top

A JS/jQuery scroll-to-top script (adjusted from the one used in the WP Astra theme) that doesn't intefere with the functioning of :target and which isn't impaired by using CSS scroll-behavior.
Consists of the following parts:

CSS in the header to light up the target and position the scroll-to-top button
A little HTML markup for the scroll-to-top button
Load jQuery (CDN) to make the script work
Script in the footer with the scrolling and show and hide functionality.

NOTES: You can look at the source code or go to Github.com/Blindeman, where I store things I use regularly for safekeeping. CSS scroll-behavior doesn't work in Edge, IE or Safari but the anchor link and :target do work so I think that's acceptable. The scroll-to-top script scrolls the page and shows and hides the button depending on whether you've scrolled down or not. I've been thinking of just using CSS smooth-scroll for the scroll-to-top part too but for now this is what it is. I'm loading jQuery in the footer, but that means you get a flash of the button before it disappears again. Up to you.

First Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Scroll to Top

First Heading

Second Heading

Third Heading

Fourth Heading

Fifth Heading