jQuery

【jQuery】スムーズなアニメーションのスクロールトップScrollPress

April 4, 2017
scrollpress

ScrollPressはスムーズなアニメーションのスクロールトップを作成するためのjQueryプラグイン。

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 { }

MIT