DEV Community

Cover image for Scroll to Top Button using HTML CSS & JQuery
Divinector
Divinector

Posted on

Scroll to Top Button using HTML CSS & JQuery

Most websites nowadays add a scroll to top button on their websites. Sometimes landing page websites could be long in height, and when a visitor scroll down the webpage and for some reason, if they want to go back to the top for some information, they have to scroll back to the top. This experience sometimes annoys the visitor, and if they have to do this for every page, they will leave the website. If we think from the user perspective, every landing page website should have a back-to-top button website. Download the code

Top comments (14)

Collapse
 
cwraytech profile image
Christopher Wray

In my opinion, the best way to do this is by adding an ID to the NAV bar and just linking to the ID from a button at the bottom.

Collapse
 
ksengine profile image
Kavindu Santhusa
Collapse
 
starryepidemic profile image
StarryEpidemic

Yeah that would be way easier and with bootstrap itll add animations too...

Collapse
 
cwraytech profile image
Christopher Wray

Yes. It’s also better for the user experience because that is what you are doing… Moving to another section on the page. With JavaScript and doing it this way it could be very confusing to screen readers.

Thread Thread
 
starryepidemic profile image
StarryEpidemic

Also bootstrap is way easier than that method and almost does it better than that method so we wont have to unnecessarily debug the code if smth goes wrong just go to the docs view the syntax type it out with the classes...

Collapse
 
yellow1912 profile image
yellow1912

Absolutely no need to use bootstrap for this. It makes sense if you already use bootstrap for the whole site, but makes no sense to include 1 huge library for such a simple thing.

Thread Thread
 
starryepidemic profile image
StarryEpidemic

No but who doesnt use bootstrap

Thread Thread
 
cwraytech profile image
Christopher Wray • Edited

Yellow, I agree. You can just add smooth scrolling to the HTML in CSS.

html {
  scroll-behavior: smooth;
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
yellow1912 profile image
yellow1912

I don't, and many others don't as well. Don't make assumptions:).

Thread Thread
 
starryepidemic profile image
StarryEpidemic

K i admit im a bit new to this stuff and most programmers that i have seen use bootstrap for their projects.

Thread Thread
 
cwraytech profile image
Christopher Wray • Edited

No worries! We’re all new at something.

 
cwraytech profile image
Christopher Wray

Starry, I don't use Bootstrap. (: I stick to Tailwind, or custom CSS

Thread Thread
 
nwaforaustine profile image
Nwafor Austine

Using scroll behaviour is just the way to go. I see no reason why I should use jQuery to implement this.

Collapse
 
yellow1912 profile image
yellow1912

Why jQuery when you have native support for this? developer.mozilla.org/en-US/docs/W... and developer.mozilla.org/en-US/docs/W...