Wrapper around "Scroll Up", a "lightweight jQuery plugin to create a customisable "Scroll to top" feature that will work with any website, with ease., (*1)
Check out the ScrollUp Demo page for demo of the Plugin and don't forget to have a look
to the scrollUp jQuery plugin Home page., (*2)
Installation
The preferred way to install this extension is through composer., (*3)
Either run, (*4)
php composer.phar require --prefer-dist assayer-pro/yii2-scrollup-widget "*"
or add, (*5)
"assayer-pro/yii2-scrollup-widget": "*"
to the require section of your composer.json
file., (*6)
Usage
Once the extension is installed, simply use it in your code by :, (*7)
Scrollup::THEME_IMAGE,
'pluginOptions' => [
'scrollText' => "To top", // Text for element
'scrollName'=> 'scrollUp', // Element ID
'topDistance'=> 400, // Distance from top before showing element (px)
'topSpeed'=> 3000, // Speed back to top (ms)
'animation' => Scrollup::ANIMATION_SLIDE, // Fade, slide, none
'animationInSpeed' => 200, // Animation in speed (ms)
'animationOutSpeed'=> 200, // Animation out speed (ms)
'activeOverlay' => false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
]
]);
?>
If you wish to use your own styling for the scroll-up, just remove the 'theme' option and provide the required CSS style., (*8)
For more information on the plugin options and usage, please refer to scrollUp jQuery plugin Home page., (*9)
Use minified version of js
In your config file set this up., (*10)
'components' => [ // Check that you are inside "components" section
'assetManager' => [
'bundles' => [
'assayerpro\scrollup\ScrollupAsset' => [
'js' => [
YII_ENV_DEV ? 'jquery.scrollUp.js' : 'jquery.scrollUp.min.js',
],
],
],
],
// ... Some other components
],
This way in Development environment you'll have the unminified version, but in
Production Yii will use the minified file., (*11)
License
yii2-scrollup-widget is released under the BSD 3-Clause License. See the bundled LICENSE.md
for details., (*12)