• Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Navigation

30 jQuery Back to top

October 11, 2021
in Navigation

You might also like

13 Navigation Patterns

24 Free CSS Tab Bars

24 Free CSS Scroll Effect Examples

9 CSS Back-to-Top Buttons

11 JavaScript Back to Top

7 CSS Back to top

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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 Fonts, Font Awesome, Normalize, Waves, jQuery


Author

  • Michał Wyrwa
  • August 15, 2018

Link

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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: –


Tags: back to topjquery
Previous Post

JavaScript Short Circuiting: What It Is and How To Use It

Next Post

7 CSS Back to top

Related Stories

13 Navigation Patterns
Navigation

13 Navigation Patterns

April 6, 2023
Free CSS Tab Bars
Navigation

24 Free CSS Tab Bars

January 19, 2023
CSS Scroll Effects
Effects

24 Free CSS Scroll Effect Examples

November 23, 2022
CSS Back-to-Top Buttons
Navigation

9 CSS Back-to-Top Buttons

October 11, 2021
JavaScript Back to Top
Navigation

11 JavaScript Back to Top

October 10, 2021
CSS Back to top
Navigation

7 CSS Back to top

September 30, 2021
Next Post
CSS Back to top

7 CSS Back to top

Discussion about this post

You might also like

CSS Cards

100 Creative CSS Cards

November 13, 2022
Multi step html form

44 Free Multi step HTML forms

March 7, 2023
CSS & HTML Dashboard Templates

13 Free HTML & CSS Dashboard Template Designs

December 29, 2021
49 CSS Tables

49 CSS Tables

November 13, 2019
HTML & CSS pricing tables

20 HTML & CSS pricing tables

May 2, 2020
CSS Dark Mode

14 Best CSS Dark Mode

October 13, 2021
w3tweaks

Unleash your front-end development potential by exploring the ultimate collection of UI designs and patterns, and play with them to create stunning websites through our tutorials.

Tags

Angularjs AngularJS Tutorials animation animation examples Button button hover effect Buttons Calendar calendars cards click buttons CSS css3 css buttons css calendar css calendars css effects css hover effects demo effect effects essentials forms free Free Tool hover hover animation Hover effects html inputs Javascript jquery js learn loaders menu mouse hover effects navigation php script text effects tool tutorial tutorials YouTube

Stay Connected

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
x
x