scroll-to-top-button-jquery

JQuery Scroll To Top Of Page Smoothly

by

JQuery Scroll To Top Of Page Smoothly is a small jQuery script to create a seamless custom button from back to top that automatically fades in/out when the page is scrolled.

back to top smooth scroll jquery, scroll to top button jquery, smooth scroll to top of page jquery, responsive scroll to top button, back to top button without javascript

How to make use of it:

1. Insert a back to top link into your doc.

<a href="" class="scrollup">
  <img src="up.svg" alt="Back To Top" />
</a>

2. Stick the back to top link to the right bottom of the web page and make it hidden on page load.

.scrollup {
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  text-align: center;
  padding: 10px;
  z-index: 100;
  display: none;
}

3. Load the required jQuery library within the doc.

<script src="/path/to/cdn/jquery.min.js"></script>

4. Fade within the back to top link when the web page is scrolled down greater than 600px.

$(window).scroll(function() {
  if ($(this).scrollTop() > 600) {
    $(".scrollup").fadeIn();
  } else {
    $(".scrollup").fadeOut();
  }
})

5. Enable the link to easily scroll the web page to the highest.

$(".scrollup").click(function() {
  $("html, body").animate({
    scrollTop: 0
  }, 600);
  return false;
})

Smooth Back To Top Button In jQuery, jquery scroll to top Plugin/Github, bs back to top smooth

See Demo And Download

Demo
Download

Official Website(DCODESHOW): Click Here

This superior jQuery/javascript plugin is developed by DCODESHOW. For extra Advanced Usages, please go to the official website.

Leave a Comment