Программная перемотка скролла

Сейчас современный сайт просто не мыслим без всяких красивых эффектов и анимаций. Если посмотреть на те сайты, которые выходят из под пера наших зарубежных коллег, то порой складывается впечатление, что еще немного и разрабатываемые сайты превратятся в интерактивные презентации. Уж, больно, там все плавно и красиво.

Именно поэтому, если делать простой внутренний переход к определенной части контента на странице, то делать только с использованием плавного скроллинга на jQuery.

Нужно хоть немного шагать в ногу со временем.

jQuery – зло или необходимость?

Лично я считаю, что любые эффекты на CSS и на jQuery стоит использовать только в том случае, если они не мешают выводу важной информации. Наверное, для многих это является прописными истинами, но применять любые красивости при разработке сайта нужно только по необходимости и с оглядкой на то, что сайт должен нормально функционировать и без них.

Конечно же сейчас сложно представить пользователя, который использует старую версию браузера (какой-нибудь Firefox 2.0 или Internet Explorer 6.0) или работает в интернете через современный браузер с отключенным движком JS. Опираться на такого посетителя при разработке все же не стоит, но если Ваш сайт будет хорошо открываться и сохранять свою читаемость в тех случаях, если JS отключен, то для вашего проекта это будет только дополнительным плюсом.

Кстати, если Вы такой же ленивый человек как и я и Вам не хочется или нет времени выполнять некоторые повторяющиеся, бытовые действия, то пора задуматься об автоматизации своей жизни. В квартире можно пусть и не все, но многое, автоматизировать. Такие вещи как освещение, температура, наличие включенной музыки в квартире и многое другое, можно эффективно автоматизировать. Есть фирма АВКастом, которая профессионально подходит к этому вопросу. В интернете я нашел много положительных отзывов о них и несомненно ребята вызывают доверие.

Что такое программная перемотка скролла?

Все мы раньше помним на “старых” сайтах когда статья большая, web-разработчики делали оглавление. При клике на любом пункте такого оглавления вы автоматически попадаете к соответствующему блоку, который размещен на этой же странице только ниже. Перемещение происходило практически молниеносно, с рывком. Такая штука очень удобна и присутствует на некоторых “современных” сайтах по сей день.

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

Выглядит это, по крайней мере современно, а иногда даже и стильно.

Реализация

За все отвечает jQuery-плагин – jquery.scrollTo-min.js. Все возможности его применения можно посмотреть здесь.

Вот боевой пример с одного моего сайта, на котором все js-файлы лежат в одноименной директории в корне (кроме jQuery):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="../js/jquery.scrollTo-min.js"></script>
<script>
  jQuery(document).ready(function(){
      jQuery('a.scroll').click(function() {
          jQuery.scrollTo('#target', 1000);
      });
  });
</script>
<a href="#" class="scroll">Пункт оглавления</a>
...
...
...
...
...
<p id="target">Важный пункт оглавления</p>

К тому же такая плавная реализация намного естественна для человеческого восприятия и позволяет переключить внимание посетителя к нужному месту не заставляя его лишний раз думать где он очутился.

Комментарии:

  1. Полина опубликовал комментарий 4 Декабрь 2015, 04:13 #

    Да, действительно красивая анимация и графика – неотъемлемый атрибут современных сайтов. Спасибо за советы, как сделать это просто.

    | Ответить
Имя
e-mail
Сайт
Текст комментария: