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://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