Плавный скроллинг к якорю на jQuery
Сегодня сделаем плавный скроллинг к якорю на основе библиотеки jQuery. Этот скрипт позволит плавно перемещаться в пределах одной страницы сайта. Обычно, такой переход используется на страницах, вытянутых вертикально, для удобства пользователей.
Для реализации плавного скроллинга нам потребуется библиотека jQuery. Ее вы сможете скачать на нашем сайте. Если ваш сайт создан на UCOZ, то библиотеку jQuery устанавливать не нужно. Она установлена по умолчанию. Для остальных эту библиотеку нужно разместить на хосте вашего сайта и подключить на странице следующим кодом:
Не забудьте поменять адрес к библиотеке на свой. Код желательно разместить в теле блока HEAD.
Теперь приступаем к подготовке страницы сайта. Вначале нужно определить, куда будем скроллить. По сути, это называется якорем. А якорем может выступать любой элемент на странице. Главное, дать ему определенный ID. Для примера:
Это якорь, установленный на лого сайта. К нему и будем перемещаться.
Теперь сделаем ссылку, кликнув по которой можно будет переместиться к якорю. Это будет простая, стандартная ссылка:
Обратите внимание на класс ссылки. Он обязателен. jQuery по нему будет определять, какие ссылки предназначены для перехода к якорю. В свойстве адреса ссылки размещен ID элемента, к которому будем скроллить, с решеткой.
Теперь сама реализация скрипта плавного скроллинга к якорю:
$(document).ready(function() {
$("a.ancLinks").click(function () {
elementClick = $(this).attr("href");
destination = $(elementClick).offset().top;
$("html").animate({ scrollTop: destination}, 1100 );
return false;
});
});
</script>
Этот скрипт нужно вписать после объявления самого jQuery (первый код).
Те, кто задался вопросом, как настраивать скрипт плавного скроллинга к якорю, читайле далее. "a.ancLinks" - этот параметр определяет класс ссылок, который будет учавствовать в плавном скроллинге. Параметр, отвечающий за скорость скроллинга к якорю, - это 1100. Поиграйтесь этим значением, пока не добъетесь нужной скорости.
Теперь можете пользоваться. Скрипт установлен. Работу скрипта можете увидеть на этой странице. Кликните сюда для проверки скрипта.
Удачи всем!
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 1182 |
| Рейтинг: | 4.0/3 |
| Дата добавления: | 17.09.2009 18:40, Четверг |
| Добавил: | Szen |
| Теги: | плавный, скрипт, прокрутка, скролл |
Рекомендуем
Дополнительно
Внимание
Все скрипты, инструкции, тесты, статьи и подборки, опубликованные в блоге портала, являются собственностью портала. Администрация портала не несет никакой ответственности за содержания статей и скриптов, но обязуется не публиковать материалы, нарушающие законодательство Российской Федерации, порнографию, инструкции по взлому и вскрытию. Администрация портала сама решает, кому помогать в решении какой-либо проблемы, а кому отказать в помощи. Цитируя наш текст и устанавливая опубликованные скрипты, вы соглашаетесь с тем, что используете продукт, созданный или подготовленный порталом SzenProgs. Портал SzenProgs оставляет за собой право менять инструкции, тесты, записи, подборки и скрипты по своему усмотрению и менять содержимое файлов, залитых на портале.
Любая, полная или частичная, публикация материала, размещенного в блоге портала SzenProgs, на другом стороннем от портала SzenProgs сайте должна сопровождаться ссылкой на источник.
Мини-форум
| № 0 | Четверг, 17.09.2009 18:40 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Плавный скроллинг к якорю на jQuery". |
| Профиль |
| № 1 | Пятница, 18.09.2009 11:09 |
3apa3a | Огромное спасибо за материал! премного благодарен за работу и за быстрый отклик |
| Профиль |
| № 2 | Суббота, 19.09.2009 21:38 |
ooster | норм штука, но я сначала подумал что это для вертикальной прокрутки сайта |
| Профиль |
| № 3 | Понедельник, 26.10.2009 14:14 |
Slays | Не могу понять почему у меня не работает  Кто может помочь ??? |
| ПрофильWWW |
| № 5 | Понедельник, 26.10.2009 16:06 |
| Slays | Я на локальной машине на Denwer делаю, но врядли это может быть причиной. Кстати, проверил на других браузерах, в Опере он работает, а в ИЕ и Firefox вот почему-то нет, хотя пример на этом сайте работает у меня в Firefox. вот код залил без всякой рекламы, посмотрите что не так и как сделать лучше. И еще один вопрос, для реализации горизонтального скролинга есть принципиальные отличия в коде ? |
| ПрофильWWW |
| № 6 | Понедельник, 26.10.2009 16:42 |
| Szen | Slays, замените строчку: $("html").animate({ scrollTop: destination}, 1100 ); на эту: $("body").animate({ scrollTop: destination}, 1100 ); Дело в том, что ИЕ и файрфокс не понимают тег HEAD в вашем коде. Поэтому скрипту нужно дать тег body. А для реализации горизонтального скролла нужно поменять части скрипта, отвечающие за координаты. |
| ПрофильWWW |
| № 7 | Понедельник, 26.10.2009 17:12 |
| Slays | Классно !!! Спасибо !!! JavaScript для меня пока темный лес с небольшими просветами, надеюсь освою ) Горизонтальный скрол хотелось бы сделать, это непосредственно в jquery-1.3.2.js искать ? |
| ПрофильWWW |
| № 8 | Пятница, 30.10.2009 01:59 |
| Szen | Slays, воспользуйтесь таким кодом: <script type="text/javascript"> Если честно, не тестировал, но по логике должно быть так. |
| ПрофильWWW |
| № 9 | Понедельник, 09.11.2009 06:37 |
| Frozen | Szen, мне нужно сделать так, чтобы при загрузке сайта (главной страницы без якорей в ссылке) она прокручивалась вниз. Как можно это реализовать? А то у вас тут поясняется только прокрутка по клику, а мне нужна автоматическая при загрузке страницы. Заранее благодарен. |
| Профиль |
| № 10 | Понедельник, 09.11.2009 07:49 |
| Szen | Frozen, вечером попробую реализовать. В случае удачи, будет новый пост. |
| ПрофильWWW |
SAYKS(17).
Желаем им счастья, здоровья, благополучия, любви и богатства!
С уважением, администрация сайта.
