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>

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