30 jQuery Back to top

By | September 29, 2021

This article contains collections of jQuery back to top demos. This collection will be updated with new back to top button scripts periodically. The demos give an insight into the various styles of buttons that one can create with jQuery, and how to implement them in your site.

Author

  • Prince
  • July 25, 2015

Link

Made with

  • HTML / CSS / jQuery

About the Code

Rocket jquery Back to top button

New back to top button for blog/website.

More info: Link

Dependency: jquery.min.js


Author

  • Kevin Imig
  • May 10, 2014

Link

Made with

  • HTML / SCSS / jQuery

About the Code

Alternative to the boring back to top button

More info: Link

Dependency: font-awesome.min.css, jquery.min.js


Author

  • Matthew Cain
  • March 6, 2017

Link

Made with

  • HTML / CSS / jQuery

About the Code

jQuery Back to Top Button

More info: Link

Dependency: jquery.min.js


Author

  • Ivan Grozdic
  • April 28, 2019

Link

Made with

  • HTML / CSS / jQuery

About the Code

jQuery Back to top with progress indicator

More info: Link

Dependency: bootstrap.min.css, unicons.css, jquery.min.js


Author

  • Rohan Hapani
  • February 9, 2017

Link

Made with

  • HTML / CSS / jQuery

About the Code

Floating Back to Top Button with Smooth Scroll using CSS & JQuey

This type of button is most useful when we have a large amount of content on a single page that time we need this type of button going at the top of the page. Using CSS and JQuery, We can build a better interface and make a designable button.

When the page is scrolled down, the button automatically displays on the page and when clicking on the button the page will scroll and move on top of the page. Using this button, we can back to the top of the screen without manually scrolling.

More info: Link

Dependency: jquery.min.js


Author

  • yying6
  • May 16, 2013

Link

Made with

  • HTML / CSS / jQuery

About the Code

Sticky Back to Top Button

More info: Link

Dependency: jquery.min.js


Author

  • Luke
  • July 21, 2014

Link

Made with

  • HTML / CSS / jQuery

About the Code

Smooth Scroll to top button + font awesome

Scrolls to the top of the page or to a page element, only showing the button when you have scrolled down 50px from the top of the screen. The button fades in and out at the bottom right of the screen.

More info: Link

Dependency: jquery.min.js


Author

  • Karen Grigoryan
  • June 1, 2014

Link

Made with

  • HTML / CSS / jQuery

About the Code

jQuery Scroll Top

More info: Link

Dependency: jquery.min.js


Author

  • Adventures in Missions
  • July 2, 2014

Link

Made with

  • HTML / CSS / jQuery

About the Code

Back To Top

This “Back to top” link allows users to smoothly scroll back to the top of the page.

More info: Link

Dependency: jquery.min.js


Author

  • Fathy AR
  • May 19, 2017

Link

Made with

  • HTML / CSS / jQuery

About the Code

Fancy “jQuery Back To Top” FAB(Float Action Button)

Creating a simple and unique “Back To Top” button using CSS3 animation + jQuery is easy.

More info: Link

Dependency: Google FontsFont AwesomeNormalizeWavesjQuery


Author

  • Michał Wyrwa
  • August 15, 2018

Link

Made with

  • HTML / CSS / jQuery

About the Code

Scroll to top button – Bootstrap 4 with Font Awesome 5

A simple Bootstrap and Font Awesome 5 markup demonstrate usage of the scroll to top button.

More info: Link

Dependency: bootstrap.min.css, fontawesome.css, jquery-3.3.1.min.js, bootstrap.min.js


Author

  • Colin Horn
  • December 21, 2017

Link

Made with

  • HTML / SCSS / jQuery

About the Code

Simple “Back To Top” Button

A simple “Back To Top” button to insert on the bottom right of your webpage

More info: Link

Dependency: jquery-3.2.1.js, fontawesome.js


Author

  • Satyajit Sahoo
  • May 5, 2014

Link

Made with

  • HTML / CSS / jQuery

About the Code

Smooth scroll with pure CSS3

Demo for smooth scroll for in-page links with pure CSS3 using negative margin.

More info: Link

Dependency: jquery.min.js


Author

  • rdallaire
  • August 20, 2013

Link

Made with

  • HTML / CSS / jQuery

About the Code

Return to Top Arrow

More info: Link

Dependency: jquery.min.js


Author

  • Bayram Savluk
  • October 3, 2020

Link

Made with

  • HTML / CSS / jQuery

About the Code

Jquery Back To Top

More info: Link

Dependency: font-awesome.min.css, jquery-3.5.1.js


Author

  • Josh Parrett
  • January 6, 2016

Link

Made with

  • HTML / CSS / jQuery

About the Code

jQuery Back to Top Button

More info: Link

Dependency: jquery.min.js


Author

  • James Basoo
  • May 23, 2013

Link

Made with

  • HTML / SCSS / jQuery

About the Code

Back to top link (on scroll up)

There-when-you-need-it scroll to the top link.

More info: Link

Dependency: jquery.min.js


Author

  • Josh Pears
  • October 3, 2014

Link

Made with

  • HTML / CSS / jQuery

About the Code

Smooth “jQuery Back to Top” Button

More info: Link

Dependency: font-awesome.min.css, jquery.min.js


Author

  • Michael van den Berg
  • November 23, 2016

Link

Made with

  • HTML / SCSS / jQuery

About the Code

Animated Back to Top Button

More info: Link

Dependency: jquery.min.js


Author

  • 4gray
  • August 29, 2013

Link

Made with

  • HTML / CSS / jQuery

About the Code

Back to Top Button (CSS & jQuery)

More info: Link

Dependency: jquery.min.js


Author

  • Arlina Code
  • April 9, 2015

Link

Made with

  • HTML / CSS / jQuery

About the Code

Smooth Scroll Back to Top

More info: Link

Dependency: jquery.min.js


Author

  • Robert Farrelly
  • June 23, 2014

Link

Made with

  • Haml / Sass / jQuery

About the Code

Simple jQuery Back to Top Button

More info: Link

Dependency: jquery.min.js


Author

  • Sean Murphy
  • December 3, 2017

Link

Made with

  • HTML / SCSS / jQuery

About the Code

jQuery Smooth Scroll To Anchor

More info: Link

Dependency: bootstrap.css, jquery.min.js, bootstrap.min.js


Author

  • Housamz
  • June 25, 2020

Link

Made with

  • HTML / CSS / jQuery

About the Code

Rocket Back to Top Button

More info: Link

Dependency: font-awesome.min.css, jquery.min.js


Author

  • Andrew Sims
  • November 26, 2017

Link

Made with

  • HTML / SCSS / jQuery

About the Code

Design brings challenges into focus #Codevember

A chance to experiment with ScrollStory – identifying and controlling the appearance of elements based on their position in the viewport.

More info: Link

Dependency: jquery-2.1.4.min.js, jquery.scrollstory.min.js


Author

  • Sergi Oca
  • January 22, 2017

Link

Made with

  • HTML / SCSS / jQuery

About the Code

:target and navigation

More info: Link

Dependency: jquery.min.js


Author

  • Arlina Code
  • April 29, 2016

Link

Made with

  • HTML / CSS / jQuery

About the Code

Tombol jQuery Back to Top Versi Umpan Ikan

Tombol Back to Top Versi Umpan Ikan

More info: Link

Dependency: jquery.min.js


Author

  • Danny Joris
  • January 21, 2019

Link

Made with

  • Pug / SCSS / jQuery

About the Code

Park sticky Scroll To Top button above the footer

Parks the sticky “Back to Top” button above the footer when scrolling down. Also hides the button in the first 100 pixels.

More info: Link

Dependency: jquery.min.js


Author

  • Vijendra Jangid
  • May 31, 2016

Link

Made with

  • HTML / CSS / jQuery

About the Code

Go Top

More info: Link

Dependency: jquery.min.js


Author

  • Michael van den Berg
  • September 21, 2016

Link

Made with

  • HTML / SCSS / JS

About the Code

Elegant Back to Top Button

Another version of a back-to-top button. Turned out uglier than I had expected.

More info: Link

Dependency:


Author: CV

I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience.