jQuery скроллинг наверх вниз к определенному div блоку

jQuery, как Вам известно, популярная java библиотека, облегчающая жизнь веб-разработчика. jQuery – это и способ асинхронного (без перезагрузки) отображения данных, набор спецэффектов, функциональные варианты интерфейсов, меню для сайта и так далее.

Сегодня мы рассматриваем интересующий многих вопрос: Как с помощью jQuery организовать скроллинг (переход к определенному элементу, тексту, перелистывание наверх, вниз HTML страницы)?

Во-первых, чтобы пользователь, при нажатие на ссылку, переместился в «шапку» вебсайта, достаточно использовать параметр name в HTML-теге <a>.
Пример:
<html>
<head>
<title>Мой сайт</title>
</head>
<body>
<a name="top"></a>
<div>Блок с большим количеством текста.</div>
<a href="#top">Поднять наверх</a>
</body>
</html>

Иногда, достаточно просто создать ссылку со знаком решётки #, вида:<a href="#top">Поднять наверх</a>

При этом скроллинга, как такового, не происходит. Происходит резкий переход, прыжок наверх или к заданной закладке. Наша задача создать красивый скроллинг на jQuery.

Для этого, вначале, подключим сам jQuery на нашей странице:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>jQuery ScrollTo скроллинг вверх вниз примеры ипользования</title>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

Кроме, собственно, самой библиотеки jQuery, нам потребуется подключить плагин скроллинга (в данной статье упоминается плагин jQuery.ScrollTo написанный Ariel Flesler):
<script src="http://weblomaster.ru/tests/jQuery_scrollto/jquery.scrollTo-1.4.3.1-min.js"></script>

Теперь, самое время написать тот скрипт который будет взаимодействовать с jQuery и плагином scrollTo:
<script>
/* самая первая строка - это строка традиционная для всех скриптов работающих с jQuery.
Она говорит о том, что скрипт будет активен тогда, когда весь HTML документ построен, готов, ready */
$(document).ready(function(){
$("a#top").click(function(){
/* это стока означает что функция задействующая скроллинг вклчается при клики на ссылку с ID = top */
$.scrollTo('div#header', {duration:1500});
/* это стока означает что скроллинг отвезёт нас к DIV с ID = header со скоростью 1500 миллисекунд  */
return false;
});
/* ниже , тот же самый код для скроллинга в подвал - футер сайта, при нажатии на ссылку с ID = bottom */
$("a#bottom").click(function(){
$.scrollTo('div#footer', {duration:1500});
return false;
});
});
</script>

А теперь HTML часть нашей страницы:
</head>
<body>
<div id="header">
Самый верхний блок
</div>
<div>
<!-- ссылка, задействующая скроллинг вниз -->
<a id="bottom" href="#">Вы Вниз?</a>
<p>Высокий , во весь экран, наполненный разным полезным контентом, блок DIV</p>
<p>Высокий , во весь экран, наполненный разным полезным контентом, блок DIV</p>
<p>Высокий , во весь экран, наполненный разным полезным контентом, блок DIV</p>
<p>Высокий , во весь экран, наполненный разным полезным контентом, блок DIV</p>
<p>Высокий , во весь экран, наполненный разным полезным контентом, блок DIV</p>
<p>Высокий , во весь экран, наполненный разным полезным контентом, блок DIV</p>
<p>Высокий , во весь экран, наполненный разным полезным контентом, блок DIV</p>
</div>
<!-- ссылка, задействующая скроллинг вверх -->
<a id="top" href="#">Вы Вверх?</a>
<div id="footer">
Подвальчик<br />
Здесь проходят коммуникации и живут котята.
</div>
</body>
</html>

В результате должно получится так: смотрите пример реализации скроллинга в jQuerry.

Скачать последнюю версию плагина ScrollTo Вы сможете на сайте разработчика.

Скачать последнюю версию jQuery Вы можете на официальном сайте.

Опубликовано 29.06.2013 в 04:12 · Автор Вебдизайнеру, сисадмину, вебмастеру · Ссылка
Рубрики: HTML, jQuery · Теги: , , , , , , , , , , , , , , , ,