#Html back to top smoothscroll how to
#Html back to top smoothscroll code

Because the user doesn't see any of the content between the link they clicked (at the top of the page) and the destination content (at the bottom of the page), they feel lost and the relationship between sections is destroyed. While this default method is fully functional, there's a usability problem: clicking that link makes the user jump instantly to the bottom of the page. from the top of the page), we link using the hash character ( #) and the name of the destination anchor: This is an invisible element that doesn't appear to visitors in the browser. a Contact form at the bottom of the page), we add a named anchor tag at the start of the section: When we want to link to a specific point on a page, the standard tool that HTML provides is the named anchor. The difference is that links don't direct from one page to another instead, they link to different points on the single page. To provide navigation from section to section on this type of longer page, links are used – just as with the more traditional pages. You've likely seen this principal of condensation in action while browsing the web. In many cases, this arrangement represents the relationship between different sections of information and ideas better than the traditional multi-page model. Instead of having three shorter pages, we can now have a single longer page that provides continuity by displaying all information in direct proximity. This isn't so much an opportunity for verbosity (indeed, the pace of today's society calls for succinctness), as it is an opportunity for condensation. The wide use of broadband connections in today's developed world means that web professionals can create webpages that hold more content than in the past. The next step would be to implement this on your website and make changes as you see fit.Google Faster Connections Beget. I hope you have found this article helpful and are able to implement a Back To Top Button and a Page Progress Bar on your website.ĭo reach out to me on Twitter if you want to ask me anything. This is multiplied by 100 to get the value in percentage that we use to determine the width of the div, that is the progress on our progress bar. This is the height of the view required to fit in all the content.Īt last, the scrollTop value is divided by the difference of scrollHeight and clientHeight and we get a decimal value of the amount scrolled. The line with the arrows represents the scrollHeight and shows that this line continues in both directions. Here, the line without the arrows represents the clientHeight which is the height of the content visible to us. I have put together this diagram to explain it better: Screenshot explaining clientHeight and scrollHeight The clientHeight is subtracted from the scrollHeight because if we don't do that, the area visible will be taken into account as well so we would never hit 100% scrolled. ScrollHeight ( MDN Reference) is the minimum height required to fit in all its children in the element it is being called upon.Īnd finally, clientHeight ( MDN Reference) is the inner height of the element it is being called upon. The scrollTop ( MDN Reference) property is the number of pixels scrolled as mentioned earlier.

#Html back to top smoothscroll how to

This is how our progress bar should look like when scrolled: Page Scroll Progress Bar on Scroll How to calculate the percentage scrolledĬalculating percentage scrolled is actually quite simple. Note that we are using our existing document scroll event listener function.

#Html back to top smoothscroll code

Here is the CodePen of what we are going to build (scroll to see the magic): Back To Top Button and Page Progress bar with HTML, CSS and JS CodePen How to Make a Back to Top Button for Your Websiteįirst of all, I am going to make the body of the website huge so that it can be scrolled: body ) Code to calculate scroll percentage and set progress bar maps

The only requirement is that the website should have enough content (or a big enough body height) to be scrollable, or else it will not make sense to add this. Note that you can add this to any website, whether it's an existing one or something you have just started working on. We are also going to look at how to add a page progress bar, one at the top which will increase in progress as we scroll down and decrease as we scroll up. This is a great feature to have on any website, and today we are going to see how to build it with nothing but HTML, CSS, and JavaScript. Clicking on that button takes you back to the top of the page. You've probably seen a 'back-to-top' button at the bottom-right corner on many websites when you're scrolling around.