jQuery Plugin For Animated Scroll To Up Button - pageup

File Size: 8.16 KB
Views Total: 2615
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Animated Scroll To Up Button - pageup

Just another jQuery scroll to top plugin that generates an animated button to scroll smoothly to the top of the page.

How to use it:

1. Include the jQuery pageup plugin after loading jQuery library.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.pageup.js"></script>

2. Create an DIV element for the scroll top top button.

<div id="pageup"></div>

3. Style & position the scroll to top button in CSS.

#pageup {
  position: fixed;
  right: 40px;
  bottom: 60px;
  width: 48px;
  height: 48px;
  background-image: url(../img/up.png);
  background-repeat: no-repeat;
  background-size: 48px 48px;
  display: none;
  cursor: pointer;
}

4. Call the plugin on the DIV element you just created.

$("#pageup").pageup();

5. Default settings.

$("#pageup").pageup({

// offset to display the scroll to top button
offset: 100,

// fade animation delay
fadeDelay: 500,

// scroll speed
scrollDuration: 400

});

Change log:

2015-08-16

  • stop animation loop

This awesome jQuery plugin is developed by mertkahyaoglu. For more Advanced Usages, please check the demo page or visit the official website.