Lightweight Animated Scroll To Top Plugin - scrollUp

File Size: 49.5 KB
Views Total: 10076
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight Animated Scroll To Top Plugin - scrollUp

Scroll To Top is an useful feature to the vistor to get back to the top of the page when scroll down the page.  scrollUp is a lightweight jQuery Plugin that helps you easily create Scroll To Top feature with smooth scrolling effect. It comes with 3 themes, so that you can customize your Scroll To Top button via themes CSS.

How to use:

1.  Include jQuery Library and scrollUp.js

<script type="text/javascript" src="js/lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollUp.min.js"></script>

2. Include Theme CSS

<link id="scrollUpTheme" rel="stylesheet" href="css/themes/pill.css">
<link id="scrollUpTheme" rel="stylesheet" href="css/labs.css">

3. Call the plugin with options

<script>

/* scrollUp Minimum setup */
$(function () {
$.scrollUp();
});

/* scrollUp full options
$(function () {
    $.scrollUp({
        scrollName: 'scrollUp', // Element ID
        topDistance: '300', // Distance from top before showing element (px)
        topSpeed: 300, // Speed back to top (ms)
        animation: 'fade', // Fade, slide, none
        animationInSpeed: 200, // Animation in speed (ms)
        animationOutSpeed: 200, // Animation out speed (ms)
        scrollText: 'Scroll to top', // Text for element
        activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
    });
});
*/

</script>

Change log:

v2.1.0

  • Add option to set a custom title to the tag
  • Code optimisations
  • Destroy method
  • Scroll distance from bottom
  • Easing implimentation (1.3)
  • Grunt intergration
  • Travis CI intergration
  • Update jQuery to 1.10.2

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