Плавный скроллинг к якорю

2 марта 2012 года, Размещено в категории: jQuery / MooTools

Добрый день, сегодня хочу разобрать красивый эффект на jQuery, которое создаёт плавное перемещение к якорю или внутренней ссылке, если по-простому.

Так же хорошие советы по созданию сайта, есть на блоге Seodiz.ru

Что-то подобное вы наверно видали на сайтах, где реализовано плавное перемещение страницы вниз или вверх. Но в этом уроке мы постараемся реализовать немного другое, а точнее сделать плавный скроллинг страницы по разделам. То есть, допустим, у вас страница FAQ, где сначала перечислены вопросы, а внизу ответы на них. Вот кликая по вопросам, страница будет плавно соскальзывать к соответствующему ответу.

Я лично использую такой плавный скроллинг к якорю для страниц мануалов, где используется содержание. Ниже вы увидите пример, прям в этом посте.

Содержание

HTML код

Сам список меню в содержании лучше всего заключить в <div>, а меню оформить в стандартных тегах для списка – ui и li.

<div id="description">
<ul>
	<li><a href="#1">HTML код для скрипта</a></li>
	<li><a href="#2">Подключяем jQuery</a></li>
	<li><a href="#3">Примеры работы плавного скроллинга</a></li>
	<li><a href="#4">Вывод</a></li>
</ul>
</div>

Адрес в href и есть наш якорь. Теперь эти якоря надо расставить в самом теле статьи, в моём случае я указываю якоря к тегу подзаголовка <h3>, вы можете указывать их к любым используемым тегам для форматирования текста - к абзацу, всем видам выделения и тому подобное.

<h3 id="1">HTML код для скрипта</h2>
<p>"Arma uirum", nonne hoc spumosum et cortice pingui
 ut ramale uetus uegrandi subere coctum?'
 quidnam igitur tenerum et laxa ceruice legendum?</p>
 
<h3 id="2">Подключяем jQuery</h2>
<p>"Arma uirum", nonne hoc spumosum et cortice pingui
 ut ramale uetus uegrandi subere coctum?'
 quidnam igitur tenerum et laxa ceruice legendum?</p>

Я привел не весь список моих якорей, которые я использую в этой статье, но надеюсь, вы уловили суть и поняли как построить html код для плавного перемещения страницы к якорю.

Подключяем jQuery

Теперь надо добавить динамику и её нам сделает jQuery, для этого в теге надо подключить библиотеку jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>

После этого скачайте сам плагин ScrollTo, который создаёт плавное перемещение. Подключите его к сайту:

<script src="jquery.scrollTo.js" type="text/javascript"></script>

Теперь создайте файл main.js и пропишите в него вот такой код:

$(document).ready(function(){
	$("#description li a").click(function(){
		var selected = $(this).attr('href');	
		$.scrollTo(selected, 500);		
		return false;
	});	
});

Этот код задаёт личные настройки скрипта. Цифра 500 - это скорость перемещения, чем она больше, тем медленнее будет происходит скроллинг страницы к якорю.

Во второй строчке задаются теги, по которым будет срабатывать перемещение при клике. Как видите это id «description», тег списка (li) и ссылка. Список всех тегов, которые используются у меня при форматировании блока «содержание».
Подключите этот файл так же к сайту.

Примеры работы плавного скроллинга

Пример работы скрипты для плавного перемещения вы можете посмотреть прямо на этой странице, нажав по одному из пунктов содержания.

Я так же выложил и исходники скрипта, только скачать вы его сможете после того, как сделаете ретвит этого поста. После ретвита, кнопка для скачивания станет сразу активной.

Download

Вывод

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

На этом всё, спасибо за внимание и читайте интерстный Блог о WordPress, где вы сможете найти ещё много интерестных уроков.






14 комментариев

  • 6 лет назад Ответить

    немного добавлю: если надо давать ссылку сразу на место, на которое надо прокрутить, то при нажатии стоит добавить location.hash = $(this).attr(‘href’); по клику. это изменит адресную строку, допишет #blabla
    и еще добавить проверку if (location.hash != ») ну и скролить так же, если условие проходит

    • 6 лет назад Ответить

      Спасибо, попробую прикрутить. А то # не добовляется при таком скроллинге.

      • 5 лет назад Ответить

        #добавляется в строку, если
        location.hash = $(this).attr(‘href’);
        приписать до return false;
        Но сам скроллинг становится каким-то «дерганным» — сначала скачок, затем скролл — вообщем, «не то». Может только в моём стареньком браузере.

  • 6 лет назад Ответить

    Ты лучше подробно напиши, как ты сделал так, чтобы скачка была доступна после ретвита )))

    • 6 лет назад Ответить

      В следующей статье опишу 🙂 Специально для тебя.

    • 6 лет назад Ответить

      Да жулик он :), скрипт к кнопке прицепил, из исходника ссылка на скачку легко достается, но решение интересное.
      Раньше такого варианта нигде не видел.

      • 6 лет назад Ответить

        На самом деле там и ретвит не надо делать, чтобы получить ссылку. Потому что скрипт проверки фиксирует закрытие окна Твиттера, после закрытия — кнопка становится активной.

  • 5 лет назад Ответить

    То есть просто можно отурыть свои Твитер, закрыть и ссылка станет активной?

  • 5 лет назад Ответить

    А в Chrome скрипт-то не работает!

  • 4 года назад Ответить

    Подскажите! Как сделать что бы эта фича работала при переходе на другую страницу?
    Мне нужно, что бы я нажал на ссылку, меня перебросило на другую страницу и плавно подползло к нужному месту.
    А у меня ничего не выходит, при переходе не страницу я моментально оказываюсь на «якоре» без всякого плавного движения.

  • 4 года назад Ответить

    Не скролит у меня плавно. А чем причина может быть? Скрипты 100% подключены правильно

  • 3 года назад Ответить

    Конфликт библиотек. Убираю для скроллинга — не работает скроллинг, Работает галерея. Убираю для фотогалереи — не рабтает галерея, работет скроллинг.

    • 3 года назад Ответить

      to Анатолий
      Была такая же фигня.
      нужно выбрать версию джейквери подходящую и туда и туда.
      у меня заработала

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: