Плавный скроллинг к якорю на jQuery
Скрипты
Сегодня сделаем плавный скроллинг к якорю на основе библиотеки jQuery. Этот скрипт позволит плавно перемещаться в пределах одной страницы сайта. Обычно, такой переход используется на страницах, вытянутых вертикально, для удобства пользователей.
Для реализации плавного скроллинга нам потребуется библиотека jQuery. Ее вы сможете скачать на нашем сайте. Если ваш сайт создан на UCOZ, то библиотеку jQuery устанавливать не нужно. Она установлена по умолчанию. Для остальных эту библиотеку нужно разместить на хосте вашего сайта и подключить на странице следующим кодом:
Не забудьте поменять адрес к библиотеке на свой. Код желательно разместить в теле блока HEAD.
Теперь приступаем к подготовке страницы сайта. Вначале нужно определить, куда будем скроллить. По сути, это называется якорем. А якорем может выступать любой элемент на странице. Главное, дать ему определенный ID. Для примера:
Это якорь, установленный на лого сайта. К нему и будем перемещаться.
Теперь сделаем ссылку, кликнув по которой можно будет переместиться к якорю. Это будет простая, стандартная ссылка:
Обратите внимание на класс ссылки. Он обязателен. jQuery по нему будет определять, какие ссылки предназначены для перехода к якорю. В свойстве адреса ссылки размещен ID элемента, к которому будем скроллить, с решеткой.
Теперь сама реализация скрипта плавного скроллинга к якорю:
$(document).ready(function() {
$("a.ancLinks").click(function () {
var elementClick = $(this).attr("href");
var destination = $(elementClick).offset().top;
$('html,body').animate( { scrollTop: destination }, 1100 );
return false;
});
});
</script>
Этот скрипт нужно вписать после объявления самого jQuery (первый код).
Те, кто задался вопросом, как настраивать скрипт плавного скроллинга к якорю, читайле далее. "a.ancLinks" - этот параметр определяет класс ссылок, который будет учавствовать в плавном скроллинге. Параметр, отвечающий за скорость скроллинга к якорю, - это 1100. Поиграйтесь этим значением, пока не добъетесь нужной скорости.
Теперь можете пользоваться. Скрипт установлен. Работу скрипта можете увидеть на этой странице. Кликните сюда для проверки скрипта.
Удачи всем!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Плавный скроллинг к якорю на jQuery
Скрипты
Скрипты, инструкции, справочники
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 75392 |
| Рейтинг: | 3.7/149 |
| Дата добавления: | 2009-09-17 18:00, Четверг |
| Добавил: | Szen |
| Теги: | плавный, скрипт, прокрутка, скролл |
Рекомендуем
Дополнительно к Плавный скроллинг к якорю на jQuery
Мини-форум
| № 0 | 2009-09-17 18:00 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Плавный скроллинг к якорю на jQuery". |
| Гость |
| № 1 | 2009-09-18 11:09 |
3apa3a | Огромное спасибо за материал! премного благодарен за работу и за быстрый отклик |
| sergey |
| № 2 | 2009-10-26 14:14 |
| Slays | Не могу понять почему у меня не работает  Кто может помочь ??? |
| Cергей · WWW |
| № 4 | 2009-10-26 16:06 |
| Slays | Я на локальной машине на Denwer делаю, но врядли это может быть причиной. Кстати, проверил на других браузерах, в Опере он работает, а в ИЕ и Firefox вот почему-то нет, хотя пример на этом сайте работает у меня в Firefox. вот код залил без всякой рекламы, посмотрите что не так и как сделать лучше. И еще один вопрос, для реализации горизонтального скролинга есть принципиальные отличия в коде ? |
| Cергей · WWW |
| № 5 | 2009-10-26 16:42 |
Szen | Slays, замените строчку: $("html").animate({ scrollTop: destination}, 1100 ); на эту: $("body").animate({ scrollTop: destination}, 1100 ); Дело в том, что ИЕ и файрфокс не понимают тег HEAD в вашем коде. Поэтому скрипту нужно дать тег body. А для реализации горизонтального скролла нужно поменять части скрипта, отвечающие за координаты. |
| Szen · WWW |
| № 6 | 2009-10-26 17:12 |
| Slays | Классно !!! Спасибо !!! JavaScript для меня пока темный лес с небольшими просветами, надеюсь освою ) Горизонтальный скрол хотелось бы сделать, это непосредственно в jquery-1.3.2.js искать ? |
| Cергей · WWW |
| № 7 | 2009-10-30 01:59 |
| Szen | Slays, воспользуйтесь таким кодом: <script type="text/javascript"> Если честно, не тестировал, но по логике должно быть так. |
| Szen · WWW |
| № 8 | 2009-11-09 06:37 |
| Frozen | Szen, мне нужно сделать так, чтобы при загрузке сайта (главной страницы без якорей в ссылке) она прокручивалась вниз. Как можно это реализовать? А то у вас тут поясняется только прокрутка по клику, а мне нужна автоматическая при загрузке страницы. Заранее благодарен. |
| Frozen |
| № 9 | 2009-11-09 07:49 |
| Szen | Frozen, вечером попробую реализовать. В случае удачи, будет новый пост. |
| Szen · WWW |
| № 10 | 2009-11-10 04:59 |
| Frozen | Szen помог в аське, большое спасибо. Отличный сайт и владелец, готовый придти на помощь. |
| Frozen |
