The Smooth Scroll widget is a customized Smooth Scroll script based on Smooth Scroll and represents a lightweight script to animate scrolling to anchor links in web page.
The preferred way to install this extension is through composer.
Either run
php composer.phar require coderius/yii2-smooth-scroll
or
composer require coderius/yii2-smooth-scroll
or add
"coderius/yii2-smooth-scroll" : "*"
to the require section of your application's composer.json
file.
And run composer update
By default selector 'a[href*="#"]' passed in for the anchor links that should be animated.
<?php echo coderius\smoothScroll\SmoothScroll::widget([]); ?>
And set html link and anchor to scroll:
<a href="#your-anchor-name">Text</a>
...
<div id="your-anchor-name"></div>
In section 'beginClientJs' and 'endClientJs' you can set any js code.
<?php
echo coderius\smoothScroll\SmoothScroll::widget([
// 'selector' => false,
'clientOptions' => [
'speed' => '1500',
'speedAsDuration' => true,
'easing' => 'easeInQuint',
'customEasing' => new \yii\web\JsExpression(
'function (time) {
return time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time;
}'
),
'clip' => true,
// History
'updateURL' => true, // Update the URL on scroll
'popstate' => true, // Animate scrolling with the forward/backward browser buttons (requires updateURL to be true)
// Custom Events
'emitEvents' => true // Emit custom events
],
'clientMethods' => [
// Animate scrolling to an anchor.
'animateScroll' => [
'anchor' => "document.querySelector('#anchor')",// numbel (y-position to scroll) or dom element
// 'toggle' => 700,
'options' => "{ speed: 1500, easing: 'easeOutCubic' }",
],
'cancelScroll' => false,
'destroy' => false,
],
//$self in is widget object
'beginClientJs' => function($self){
$script = "var logScrollEvent = function (event) {
// The event type
console.log('type:', event.type);
// The anchor element being scrolled to
console.log('anchor:', event.detail.anchor);
// The anchor link that triggered the scroll
console.log('toggle:', event.detail.toggle);
};";
return $script;
},
'endClientJs' => function($self){
$script = "console.log(" . $self->getScrollVarName() . ")";
return $script;
},
/**
* This script will be generated if you specify the elements of the array
* as in the example below.
*
* document.addEventListener('scrollStart', logScrollEvent, false);
* document.addEventListener('scrollStop', logScrollEvent, false);
* document.addEventListener('scrollCancel', logScrollEvent, false);
**/
'clientEvents' => [
'scrollStart' => ['logScrollEvent', false],
'scrollStop' => ['logScrollEvent', false],
'scrollCancel' => ['logScrollEvent', false],
],
]);
?>
Reference to js plugin and more settings find in github author repository that is used in this widget.
Comments