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.
About the Code
Rocket jquery Back to top button
New back to top button for blog/website.
More info: Link
Dependency: jquery.min.js
About the Code
Alternative to the boring back to top button
More info: Link
Dependency: font-awesome.min.css, jquery.min.js
About the Code
jQuery Back to top with progress indicator
More info: Link
Dependency: bootstrap.min.css, unicons.css, jquery.min.js
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
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
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
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 Fonts, Font Awesome, Normalize, Waves, 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
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
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
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
About the Code
Smooth “jQuery Back to Top” Button
More info: Link
Dependency: font-awesome.min.css, jquery.min.js
About the Code
jQuery Smooth Scroll To Anchor
More info: Link
Dependency: bootstrap.css, jquery.min.js, bootstrap.min.js
About the Code
Rocket Back to Top Button
More info: Link
Dependency: font-awesome.min.css, jquery.min.js
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
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
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
Discussion about this post