Russian English
jQuery Plugins & Javascript Functions
PHP Classes & Functions
HTML && CSS Frameworks

jQuery Centering

Опубликовано: 19.12.2015

Скачать jQuery Centering последнюю версию

Плагин вертикальной прокрутки экрана до расположения указанного элемента по-центру.

Если высота передаваемого елемента больше высоты экрана, то выравнивание происходит по верхней части элемента.

jquery.centering.js
/*!
 jQuery Centering 1.0.0
 https://skidanov.ru/dev/jquery-plugins/centering/
 https://github.com/skidanovdima/jquery-centering
 */

;(function($){

    $.fn.Centering = function(config) {
        var e = $(this);

        var defaultConfig = {
            animationSpeed: 400
        };
        e.config = $.extend(true, {}, defaultConfig, config);

        document.body.style.overflow = 'hidden';
        var viewportHeight = $(window).height();
        document.body.style.overflow = '';
        var offsetTop = e.offset().top;
        var outerHeight = e.outerHeight();

        $('html, body').stop().animate({
            scrollTop: (viewportHeight < outerHeight ? offsetTop : offsetTop + (outerHeight - viewportHeight) / 2)
        }, e.config.animationSpeed);

        return e;
    };

}(jQuery));

Примеры

<script src="http://en.skidanov.ru/sources/jquery-plugins/jquery.centering/jquery.centering.min.js"></script>
            <style>
            .page {
            height: 1500px;
            background: #fcc;
            padding: 700px 0;
            }
            .element1 {
            display: inline-block;
            background: #090;
            padding: 20px;
            color:#fff;
            }
            </style>
            <button class="centering">Click to scroll centering green element</button>
            <div class="page" align="center">
            <span class="element1">Element</span>
            </div>
example.js
;(function($) {

    $('button.centering').on('click', function() {
        $('.element1').Centering();
    });

}(jQuery));

Демо

Element