jQuery-scrollpress-PROSAGA-码农传奇

ScrollPress

JQuery plugin to make a smooth animation on scroll top.

V 1.3

Features

Animate scroll top
Animate DOM elements scroll top
JQuery UI easing functions
Back to top button
Fade in button with animation
Animation when click on button
Animate self link ( href + ID )
Scroll between elements with custom ease and duration

Setup

 $(window).scrollPress({options});

Options in act


$(window).scrollPress({
            scrollPress: true,
            // Global animation duration
            duration: 1000,
            // Global animation timing function
            easing: 'easeInOutCubic',
            btn_state: null,
            // btn arrow icon
            btn_icon: "<i class='fa fa-angle-up'></i>",
            /**
             * type {Jquery selector}
             * example: $('.footer-element-scrollToTop')
            */
            btn_container: null,
            // type {Number}
            btn_threshold: $window.innerHeight()/3,
            // disable incase of styling with external stylesheet
            btn_inlineStyle: true,
            btn_style: {
                zIndex: '999',
                width: '40px',
                height: '40px',
                position: 'fixed',
                right: '20px',
                bottom: '20px',
                left: 'auto',
                top: 'auto',
                backgroundColor: 'white',
                borderRadius: '14%',
                transition: 'all 1s ease',
                animationDelay: ''
            },
            btn_fadeAnimation: {
                slide: true,
                scale: true,
                bounce: false,
                rotate: false,
            },
            // type {String}
            btn_fadeInClass: null,
            // type {Boolean}
            btn_clickAnimation_bounce: false,
            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: '#96d0ff',
                borderRadius: null,
            },
            btn_clickAnimation_spreadBorder: {
                state: true,
                outerHTML: '<div class="spread-border"></div>\<!--/.spread-border-->',
                inlineStyle: true,
                zIndex: '997',
                width: '100%',
                height: '100%',
                borderWidth: '4px',
                borderStyle: 'solid',
                borderColor: '#e1e1e1',
                borderRadius: null
            },
            //type {String}
            btn_clickClass: null,
             /*
             * scroll to target offset when click on selector
            */
            scrollOnClick: {
                // type {JQuery selector} 
                clickOn: null,
                /**
                 * unique selector(preferred id)
                 * type {JQuery selector} 
                */
                scrollTo: null,
                duration: 1400,
                easing: null,
                autoDetect: true
            },
            scrollOnClick_multi: {
                0: {
                    clickOn: null,
                    scrollTo: null,
                    duration: null,
                    easing: null
                },
                1: {
                    clickOn: null,
                    scrollTo: null,
                    duration: null,
                    easing: null
                }
            }
});

Class to style scroll to top button

.scroll-btn .sb-layer { }
/* Hover style */
.scroll-btn:hover .sb-layer { }

Demo

https://scrollpress.github.io/scrollpress/demo-index.html

options

Options	Type	Default value	Description
scrollPress	Boolean	true	To animate scrollTop when press on any key that makes changes on scrollTop (pg up/space/…)
duration	Number	1000	Duration of scrollTop animation
easing	String	easeInOutCubic	Easing function of scrollTop animation
btn_state	Boolean	true	Scroll to top button
btn_icon	String	\	Scroll to top arrow
btn_container	JQuery Selector	null	Scroll to top button container, to make it relative to element instead of screen. example: to put button at footer.
btn_threshold	Number	$window.innerHeight()/3	To show scroll to top button when scrollTop passes it.
btn_inlineStyle	Boolean	true	Disable incase of styling with external stylesheet
btn_style	Object	style properties	Scroll to top button style
btn_fadeAnimation	Object	slide/ scale	Button animation when scroll top passes threshold
fadeInClass	String	btn_fadeAnimation classes	Class added to button when scroll top passes threshold
btn_clickAnimation_bounce	Boolean	false	Add bounce animtion when click on button
btn_clickAnimation_bubble	Object		Add Bubble animtion when click on button
btn_clickAnimation_spreadBorder	Object		Add spread border animtion when click on button
btn_clickClass	String	btn_clickAnimation classes	Add class when click on button
scrollOnClick	Object		scroll to target when click on element
autoDetect	Boolean	true	To animate scrollTop when click on anchor that hold element id in it’s href
clickOn	JQuery selector	Null	To move scollTop to target when click on it
scrollTo	JQuery selector	Null	clickOn Target
duration	Number	1400	ScrollTop animation duration
easing	String	easing	ScrollTop animation timing function
scrollOnClick_multi	Object		Like scrollOnClick but with putting options in another Object (label). Example: scrollOnClick_multi: { home: { clickOn: … }, about: { … } }

More info

http://www.jquery-az.com/4-examples-of-scroll-top-with-animation-by-jquery-plug-in-scrollpress