jQuery scrolltop: The New Way to Keep Your Scrolling Handy

jQuery scrolltop - The New Way to Keep Your Scrolling Handy

Scroll to the top of the page with a single click! jQuery Scroll Top is a jQuery plugin for scrolling to the top of the page. The jQuery scrollTop function is used to move the content to the top of the browser window. 

The plugin provides an easy way to scroll to the top of any page on a website from any link or button by using just one line of code and is compatible with JavaScript-disabled browsers. The plugin works perfectly with responsive web design.

It’s up to you how many pages down (or up) this new start point is and the plugin will scroll there. This allows you to get back to specific areas of your site without having to use page refreshes or switch between tabs.

Here’s how to use it:

jquery.scrolltop.css is required to style the ‘back to top’ button.

<link rel="stylesheet" href="jquery-scrollbutton.css">

Scroll top of the page using the jQuery library and the jquery.scrolltop.js.

JavaScript Progress Bar with Percentage
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.scrolltop.js"></script>

The plugin will generate a ‘back to top’ button at the bottom of the page when you scroll down.

$.scrolltop();

The default text/icon/symbol inside ‘back to top’ should be changed.

$.scrolltop({
  template:'^'
	});

When scrolling back to the top of the page, specify the animation speed.

What is Epoch Time? The Most Accurate Way to Measure Time
$.scrolltop({
  duration: 1000
});

To make the ‘back to top’ button stand out, add an extra CSS class to it.

$.scrolltop({
  class:'custom-scrolltop'
});

File Info.

File Size3.44 MB
Last Update5 Years Ago
Published Date5 Years Ago
LicenseMIT