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

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

   Рассмотрим случай со скроллерами, а именно добавление кнопки скроллера на страницу шаблона 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 на:

  1. bottom - отступ снизу или top - отступ сверху.
  2. 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 (){. И контролирует скрытие/появление кнопки Наверх

А где можно увидеть пример?

   Например, на нашем сайте. Или на в одной из наших работ

Обратите внимание при прокрутке на кнопку справа

Тестировалось на Joomla 1.5.22 - 1.5.23, awesome-design template,celyn-abc-camp template

Поддерживаются все современные и известные браузеры

Автор: Новожилов Пётр Black#FFFFFF

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

Скачать файл:

    Notice: Undefined variable: gallery_on in /home/www/awesome/data/www/awesome-design.com/templates/beez/html/com_k2/templates/default/item.php on line 73
  • Исходный код примера (484 загрузок)

Комментарии   

 
+1 #1 Сергей 09.06.2013 16:54
Нравится, что данный скрипт позволяет в любой момент прервать прокрутку колесиком мыши, в отличие от множества скриптов, представленных на других сайтах. Очень бы хотелось узнать аналогичный код для прокрутки страницы вниз!
Цитировать
 

Добавить комментарий


Яндекс.Метрика