суббота, 14 декабря 2013 г.

Плавный скролл по якорям

Это обновленный пост с учетом выхода новых версий плагинов и библиотек. Рекомендую тем, кто брал код и архив с прошлой версии этого поста, обновить их.
При переходе по якорям страница по умолчанию перескакивает на нужное место мгновенно. Для того, чтобы она проматывалась плавно, надо сделать буквально 2 телодвижения.

Посмотреть, как это работает можно здесь (кликаем по списку "Выбирай сайт" ).

Ну, прежде всего, надо знать, что такое якоря. На досуге напишу об этом, а пока, как говориться, гугл вам в помощь. Хотя незнающих могу обрадовать, что такая фишка будет работать на странице с модулем SiteEdit "Вопросы и ответы".

Тот, кому понятие "якорь" на странице уже известно, должен выполнить следующее:
  1. Прикрепить к проекту следующие файлы библиотек, скачав их архивом здесь
  2. Прописать в глобальное поле для java-скриптов следующий код
<script type="text/javascript" src="/lib/js/jquery/jquery.min.js"></script> <script type="text/javascript" src="files/jquery.localscroll-1.2.7-min.js"></script> <script type="text/javascript" src="files/jquery.scrollTo-1.4.3.1-min.js"></script> <script type="text/javascript"> $(function($) { $.localScroll({ duration: 1000, hash: false }); }); </script>

Скорость прокрутки регулируется параметром "duration: 1000", где 1000 - это миллисекунды.

Теперь наслаждаемся плавным скроллом. Если не работает, проверьте, есть ли библиотека по адресу http://ваш домен/files/jquery.localscroll-1.2.7-min.js (аналогично и остальные). Если нет, попробуйте перевыгрузить файлы.

Кстати, такая фишка отлично работает в сочетании с кнопкой "Наверх" Этот пост написан благодаря подсказке Артема Хусаинова, за что ему спасибо!

3 комментария:

  1. Получается это как дополнение к стандартному модулю "вопросов ответов" можно использовать?

    ОтветитьУдалить
    Ответы
    1. Можно и так. Хотя будет работать при наличии любых якорей на странице, в т.ч. прописанных вручную.

      Удалить
  2. Спасибо!!!
    Наконец-то "победил" cкроллинг в WebBuilder.

    ОтветитьУдалить