Плавный скроллинг к якорю
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) и ссылка. Список всех тегов, которые используются у меня при форматировании блока «содержание».
Подключите этот файл так же к сайту.
Примеры работы плавного скроллинга
Пример работы скрипты для плавного перемещения вы можете посмотреть прямо на этой странице, нажав по одному из пунктов содержания.
Я так же выложил и исходники скрипта, только скачать вы его сможете после того, как сделаете ретвит этого поста. После ретвита, кнопка для скачивания станет сразу активной.
Вывод
В итоге мы получили красивое меню или содержание статьи, которое можно использовать не только для больших статей, где много заголовков и подзаголовков. Можно также применять для форматирования FAQ и тому подобных контентых страниц на сайте.
На этом всё, спасибо за внимание и читайте интерстный , где вы сможете найти ещё много интерестных уроков.
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 лет назад
Да, правильно.
Роман
5 лет назад
А в Chrome скрипт-то не работает!
Дмитрий
4 года назад
Подскажите! Как сделать что бы эта фича работала при переходе на другую страницу?
Мне нужно, что бы я нажал на ссылку, меня перебросило на другую страницу и плавно подползло к нужному месту.
А у меня ничего не выходит, при переходе не страницу я моментально оказываюсь на «якоре» без всякого плавного движения.
Иван
4 года назад
Не скролит у меня плавно. А чем причина может быть? Скрипты 100% подключены правильно
3 года назад
Конфликт библиотек. Убираю для скроллинга — не работает скроллинг, Работает галерея. Убираю для фотогалереи — не рабтает галерея, работет скроллинг.
Стас
3 года назад
to Анатолий
Была такая же фигня.
нужно выбрать версию джейквери подходящую и туда и туда.
у меня заработала