Главная » Файлы » Прочие скрипты » jQuery
Плавный скроллинг к якорю на jQuery
22.06.14, 15:43:29



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

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

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


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

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

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


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

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

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


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

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

Код
<script type="text/javascript">  
$(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 | Добавил: Apocalypse | Теги: Плавный, на, скроллинг, JQuery, якорю
Просмотров: 675 | Загрузок: 0 | Рейтинг: 1.0/1
Всего комментариев: 0
Имя *:
Email: