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.
Demo 1 Demo 2
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:
See online demo and code
You only need to initiate the plug-in as follows:
<script>
$(document).ready(function () {
$(window).scrollPress();
});
</script>
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:
See online demo and code
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>
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:
See online demo and code
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:
See online demo and code
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.