coderius/yii2-smooth-scroll Yii2 Smooth Scroll widget

widgetsmoothscrollyii2-smooth-scroll

Smooth Scroll js plugin widget for Yii2

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.

Installation

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

Basic usage.

  • In view include widget:

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>

Advansed usage.

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.

Statistics

Downloads
GitHub Stars
GitHub Forks

Releases

Comments



1.0.0 is the latest of one release



MIT license
Stats
0 github stars & 0 github forks
0 downloads in the last day
0 downloads in the last 30 days
12 total downloads