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

Scroll to Top Button using HTML CSS & JQuery

divinector profile image Divinector ・1 min read

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

Discussion

pic
Editor guide
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
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

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

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...