Создание плавной прокрутки в Joomla — Mootools

Поговорим о создании удобной навигации в шаблонах Joomla. А в частности о скроллерах для шаблонов. Обычно посетителями сайта просто надоедает вращать колёсиком мышки после просмотра очередной статьи. Да еще и сам скроллер превращается в длинную полоску, если статья обсуждаема. Что же делать? Выходов из ситуации несколько:

Продублировать верхнее и нижнее меню. Повторив ссылки.
Разработать шаблон так, чтобы левая и правая колонка находились постоянно на одном месте (в css это называется position: fixed).
Создать кнопку или toolbar, находящуюся всегда в поле зрения посетителя Вашего сайта, и позволяющую посетителю перейти на верх страницы в один щелчок мышкой

Первые два способа имеют свои недостатки. Случай первый продублировать верхнее и нижнее меню: зачастую верхнее меню имеет сложную структуру. Иногда с выпадающими подпунктами. Согласитесь, создать такое меню в подвале сайта будет очень сложно.

Случай второй разработать шаблон так, чтобы левая и правая колонка находились постоянно на одном месте: мы ограничены по высоте меню. Иначе появится дополнительный скроллер (и ситуация станет еще ужаснее). А если все же остается горизонтальное меню в шапке страницы, то вопрос комфортного перехода к шапке страницы остается открытым.

Рассмотрим случай со скроллерами, а именно добавление кнопки скроллера на страницу шаблона Joomla при активной прокрутке посетителем вниз страницы.

Перед любыми модификациями Вашего шаблона Joomla обзаведитесь резервной копией всех его файлов! Скопировав копию шаблона Joomla на Ваш комьютер.

Создатели Joomla, начиная с версии 1.5 здесь позаботились о нас. Внедрив код замечательного готового плавного скроллера, написанного на Mootools SmoothScroll. Осталось разметить саму кнопку и вызвать объект плавной прокрутки. Находим файл разметки шаблона (файл с открывающимся и закрывающимся тегом <body> в папке шаблона), и вставляем якорь <a name=»selflink_top» id=»selflink_top»></a> после тэга <body>.

Теперь добавим в шаблон следующие строчки, вначале файла после раскрывающегося <?php

    $uri                = & JURI::getInstance();
    $current            = $uri->toString( array('scheme', 'host', 'port', 'path', 'query'));

Здесь мы определяем полный адрес страницы вместе со всеми переменными для будущей якорной ссылки. И наконец вставим в код ссылку на якорь. Перед закрывающимся тегом </body> добавляем следующее:

    <div id="to-top">
	<a href="<?php echo $current; ?>#selflink_top" rel="nofollow">
		<?php echo JText::_('TO_TOP'); ?>
	</a>
    </div>

Почему именно перед закрывающимся? Чтобы быть точно уверенными в положении ссылки на странице. Иначе, если мы вставим ссылку в блок с position: absolute,position:fixed можем получить интересный сюрприз.

После чего нам требуется определить название якорной ссылки. Открываем фтп вашего сайта на Joomla. Идем в начальную папку CMS Joomla. Далее переходим в /language/ru-RU открываем файл ru-RU.ini и добавляем в конец файла строчку:

    TO_TOP = Наверх

(рекомендую проделать с каждым языком обязательно, если Ваша система многоязычна).

Теперь добавим необходимый javascript:

    window.addEvent('domready',function(){
    new SmoothScroll({
    			transition: Fx.Transitions.backOut,
    			fps: 60,
    			duration: 1500
    });
    window.addEvent('scroll',function (){
        if($('to-top')){
        var scrOfX = 0, scrOfY = 0;
        if( typeof( window.pageYOffset ) == 'number' ) {
          //Netscape compliant
          scrOfY = window.pageYOffset;
        } else if( document.body && ( document.body.scrollLeft
        || document.body.scrollTop ) ) {
          //DOM compliant
          scrOfY = document.body.scrollTop;
        } else if( document.documentElement
        && ( document.documentElement.scrollLeft
        || document.documentElement.scrollTop         )){
          //IE6 standards compliant mode
          scrOfY = document.documentElement.scrollTop;
        };
        var myHeight = 0;
        if( typeof( window.innerWidth ) == 'number' ) {
          //Non-IE
          myHeight = window.innerHeight;
        } else if( document.documentElement
        && ( document.documentElement.clientWidth
        || document.documentElement.clientHeight ) ) {
          //IE 6+ in 'standards compliant mode'
          myHeight = document.documentElement.clientHeight;
        } else if( document.body && ( document.body.clientWidth
        || document.body.clientHeight ) ) {
          //IE 4 compatible
          myHeight = document.body.clientHeight;
        }
        myHeight            =  myHeight / 2;
        if(scrOfY < myHeight){
            $('to-top').setStyles({'visibility':'hidden'});
            $('to-top').setStyles({'opacity':'0'});
        } else {
            $('to-top').setStyles({'visibility':'visible'});
            $('to-top').setStyles({'opacity':'0.95'});
        };
        };
        }
    );
});

И чуточку css:

#to-top{
    position: fixed;
    bottom: 30px;
    right: 20px;
    z-index: 10000;
    width: 100px;
    height: 30px;
    text-align: center;
    background-color: #BCF4FF;
    visibility: hidden;
}
#to-top a{
    color: #683A1E;
    font-weight: bold;
    line-height: 30px;
    border-bottom: 1px dashed;
    text-decoration: none!important;
    font-style: italic;
}

И все. В нижнем правом углу вашего шаблона Joomla, когда посетитель хотя бы немного воспользовался вертикальной прокруткой, появляется кнопка Наверх, щелкнув по которой посетитель быстро вернется к шапке сайта. Причем сама прокрутка произойдет плавно.

Разберем визуализацию самой кнопки плавной прокрутки в шаблоне Joomla. В селекторе #to-top Вы можете изменить размер ссылки, повысить ее z-index, если кнопка «прячется» за элементами страницы, а также Вы можете задать выравнивание текста ссылки:

    position: fixed;
    bottom: 30px;
    right: 20px;

Блок с кнопкой находится всегда внизу страницы. Вы можете управлять положением блока заменив bottom и right на:

bottom — отступ снизу или top — отступ сверху;
left — отступ слева или right — отступ справа.

Цвет фона блока Вы можете подправить, изменив значение background-color: #BCF4FF;

В селекторе #to-top Вы можете изменить цвет ссылки color: #683A1E; и ее начертание. Для тех, кому интересно, а что же происходит в javascript коде?

По событию, когда html страницы уже загружен window.addEvent(‘scroll’,function (){ мы инициализируем плавную прокрутку для всех якорных ссылок страницы new SmoothScroll({ , где fps: 60 — кадров в секунду,duration: 1500 — время прокрутки в мс. Можете поэкспериментировать с этими параметрами.

Теперь добавляем кросбраузерную функцию, которая вызывается при прокрутке окна window.addEvent(‘scroll’,function (){. И контролирует скрытие/появление кнопки «Наверх».

Поделитесь со своими друзьями