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

Скрипты

Плавный скроллинг к якорю на jQuery
оценка: 3.7 из 5
оценок: 148, отзывов: 54

Сегодня сделаем плавный скроллинг к якорю на основе библиотеки jQuery. Этот скрипт позволит плавно перемещаться в пределах одной страницы сайта. Обычно, такой переход используется на страницах, вытянутых вертикально, для удобства пользователей.

Для реализации плавного скроллинга нам потребуется библиотека jQuery. Ее вы сможете скачать на нашем сайте. Если ваш сайт создан на UCOZ, то библиотеку jQuery устанавливать не нужно. Она установлена по умолчанию. Для остальных эту библиотеку нужно разместить на хосте вашего сайта и подключить на странице следующим кодом:

Code
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script>

Не забудьте поменять адрес к библиотеке на свой. Код желательно разместить в теле блока HEAD.

Теперь приступаем к подготовке страницы сайта. Вначале нужно определить, куда будем скроллить. По сути, это называется якорем. А якорем может выступать любой элемент на странице. Главное, дать ему определенный ID. Для примера:

Code
<img src="logo.gif" id="logoTop" alt="" width="300" height="60" border="0">

Это якорь, установленный на лого сайта. К нему и будем перемещаться.

Теперь сделаем ссылку, кликнув по которой можно будет переместиться к якорю. Это будет простая, стандартная ссылка:

Code
<a href="#logoTop" class="ancLinks">К лого!</a>

Обратите внимание на класс ссылки. Он обязателен. jQuery по нему будет определять, какие ссылки предназначены для перехода к якорю. В свойстве адреса ссылки размещен ID элемента, к которому будем скроллить, с решеткой.

Теперь сама реализация скрипта плавного скроллинга к якорю:

Code
<script type="text/javascript">
  $(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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Плавный скроллинг к якорю на jQuery
Скрипты
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

rss
Категория:Скрипты
Просмотрено:67245
Рейтинг:3.7/148
Дата добавления:2009-09-17 18:00, Четверг
Добавил:Szen
Теги:плавный, скрипт, прокрутка, скролл

Мини-форум

№ 02009-09-17 18:00
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Плавный скроллинг к якорю на jQuery".
Гость
№ 1
2009-09-18 11:09 Спам
3apa3a
Аватар участника 3apa3a
Огромное спасибо за материал! премного благодарен за работу и за быстрый отклик
sergey
№ 2
2009-10-26 14:14 Спам
Slays
Аватар участника Slays
Не могу понять почему у меня не работает sad
Кто может помочь ???
Cергей · WWW
№ 3
2009-10-26 14:48 Спам
Szen
Аватар участника Szen
Slays, ссылку дайте, посмотрю!
Szen · WWW
№ 4
2009-10-26 16:06 Спам
Slays
Аватар участника Slays
Я на локальной машине на Denwer делаю, но врядли это может быть причиной.
Кстати, проверил на других браузерах, в Опере он работает, а в ИЕ и Firefox вот почему-то нет, хотя пример на этом сайте работает у меня в Firefox.

вот код залил без всякой рекламы, посмотрите что не так и как сделать лучше.
http://ifolder.ru/14688267

И еще один вопрос, для реализации горизонтального скролинга есть принципиальные отличия в коде ?

Cергей · WWW
№ 5
2009-10-26 16:42 Спам
Szen
Аватар участника Szen
Slays, замените строчку:
$("html").animate({ scrollTop: destination}, 1100 );
на эту:
$("body").animate({ scrollTop: destination}, 1100 );
Дело в том, что ИЕ и файрфокс не понимают тег HEAD в вашем коде. Поэтому скрипту нужно дать тег body.
А для реализации горизонтального скролла нужно поменять части скрипта, отвечающие за координаты.
Szen · WWW
№ 6
2009-10-26 17:12 Спам
Slays
Аватар участника Slays
Классно !!! Спасибо !!!
JavaScript для меня пока темный лес с небольшими просветами, надеюсь освою )

Горизонтальный скрол хотелось бы сделать, это непосредственно в jquery-1.3.2.js искать ?

Cергей · WWW
№ 7
2009-10-30 01:59 Спам
Szen
Аватар участника Szen
Slays, воспользуйтесь таким кодом:

<script type="text/javascript">
  $(document).ready(function() {
    $("a.ancLinks").click(function () {
      elementClick = $(this).attr("href");
      destination = $(elementClick).offset().left;
      $("body").animate({ scrollLeft: destination}, 1100 );
      return false;
    });
  });
</script>

Если честно, не тестировал, но по логике должно быть так.

Szen · WWW
№ 8
2009-11-09 06:37 Спам
Frozen
Аватар участника Frozen
Szen, мне нужно сделать так, чтобы при загрузке сайта (главной страницы без якорей в ссылке) она прокручивалась вниз. Как можно это реализовать? А то у вас тут поясняется только прокрутка по клику, а мне нужна автоматическая при загрузке страницы.
Заранее благодарен.
Frozen
№ 9
2009-11-09 07:49 Спам
Szen
Аватар участника Szen
Frozen, вечером попробую реализовать. В случае удачи, будет новый пост.
Szen · WWW
№ 10
2009-11-10 04:59 Спам
Frozen
Аватар участника Frozen
Szen помог в аське, большое спасибо. Отличный сайт и владелец, готовый придти на помощь.
Frozen
Учавствовать в обсуждении "Плавный скроллинг к якорю на jQuery" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Что Вы любите читать?
Всего ответов: 121
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 4
Гостей: 4
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz