Scroll Top with Animation by jQuery plug-in: scrollpress

Scroll to top with animation

The scrollpress is a nice plug-in if you want to let users scroll top by pressing a button with smooth animation.

The page scrolls up smoothly while the button animates in a nice way. You may style the button with CSS and optionally use the font-awesome or other icons. The duration of animation can also be set by using plug-in options.

Developer’s page Download plug-in

Setup the scrollpress plug-in

You require adding the scrollPress.min.css or development version in the <head> section of your webpage.

<link rel=”stylesheet” href=”css/scrollPress/scrollPress.min.css”>

Also, include the jQuery library which is followed by the plug-in JS file before the script and body closing tag.

 <script src=”http://code.jquery.com/jquery-1.9.1.min.js” type=”text/javascript”></script>

<script src=”js/scrollPress/scrollPress.min.js”></script>

A demo of jQuery scroll top with default settings

In this demo, no options are customized, just using the default settings for showing how scrollpress plug-in works. Scroll down the demo page until back to top button appears towards the right bottom.

Press that and see how button animated along with page moving up smoothly:

jQuery scroll top default

You only need to initiate the plug-in as follows:

    <script>

    $(document).ready(function () {

        $(window).scrollPress();

    });

    </script>

 

A demo of customizing the move top button

You may customize the button as per desire by using different available options in the plug-in. It includes customized icon, color, size, distance from left, right etc, transition animation as button appears and disappears as you press to move top.

You may even change the bubble as the button is pressed. In this demo, I have customized the button by using the btn_style, btn_clickAnimation_bubble and easing options:

jQuery scroll top button

Following is the script used for this demo:

<script>

$(document).ready(function () {

 $(window).scrollPress({

            scrollPress: true,

            easing: 'easeInSine',

            btn_style: {

                position: 'fixed',

                right: '25px',

                bottom: '15px',

                left: 'auto',

                top: 'auto',

                height: '55px',

                width: '55px',

                backgroundColor: 'white',

                borderRadius: '50%',

                transition: 'all 2s ease-in-out',

                animationDelay: ''

            },

            btn_clickAnimation_bubble: {

                state: true,

                outerHTML: '<div class="click-bubble-container"><div class="click-bubble"></div></div><!--/.click-bubble-->',

 

                inlineStyle: true,

                zIndex: '999',

                width: '100%',

                height: '100%',

                backgroundColor: '#408080',

                borderRadius: null,

            }                       

});

    });

</script>

 

Customizing the color of button

Not only may you change the color of the button but other properties by using the CSS. For that, simply use the .scroll-btn .sb-layer class and add/modify the properties as per the need.

See this demo where I have changed the background color at normal and hover states (in style section) along with other options in the jQuery code:

jQuery scroll top color

The following CSS classes are used in the <style> section:

<style>

.scroll-btn .sb-layer {

    background-color:#FF8306;

}

 

/* Hover style */

.scroll-btn:hover .sb-layer {

    background-color:#FFBE7D;

}

</style>

 

Using the btn_icon option

As mentioned earlier, the scroll top plug-in uses the font-awesome icon. For that, its library is included in the <head> section of all demos. For changing the icon, use the btn_icon option in the jQuery code.

In this demo, I have used the fa-arrow-up icon:

jQuery scroll top icon

The jQuery code:

<script>

$(document).ready(function () {

 $(window).scrollPress({

            scrollPress: true,

            easing: 'easeInSine',

            btn_style: {

                position: 'fixed',

                right: '25px',

                bottom: '15px',

                left: 'auto',

                top: 'auto',

                height: '55px',

                width: '55px',

                backgroundColor: 'white',

                borderRadius: '15%',

                transition: 'all 1s ease-in-out',

                animationDelay: ''

            },

            btn_clickAnimation_bubble: {

                state: true,

                outerHTML: '<div class="click-bubble-container"><div class="click-bubble"></div></div><!--/.click-bubble-->',

 

                inlineStyle: true,

                zIndex: '999',

                width: '100%',

                height: '100%',

                backgroundColor: '#B66D6D',

                borderRadius: null,

            },

            // btn arrow icon

            btn_icon: "<i class='fa fa-arrow-up'></i>"                                   

});

    });

</script>

 

Get the complete code from the demo page.

The plug-in has a number of other options that you may explore by visiting the developer’s page.