Logo: Uran web studio
Сделать сайт в Украине

Плавная прокрутка веб-страницы к нужному элементу или якорю. Используя jQuery

Якорь - закладка с уникальным именем в любом месте веб-странице, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки "#" впереди:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="admin" /> <title>Пример якоря</title>
</head>
<body>
<div class="top_menu"><a name="top"></a></div>
<div id="content">Some content here</div>
<div class="end_of_article"><a href="#top">Go to page top</a></div>
</html>

Пример, как с помощью простого скрипта сделать плавную прокрутку страницы к якорю.

Шаги:

1 - сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a> или же просто присвоить какому-либо тегу атрибут id с желаемым значением. Имя якоря должно быть уникальным в пределах страницы. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.

<div class="top_menu"><a name="top"></a></div>
<div id="content">Some content here</div>
<a href="#top">Go to page top</a>

2 - реализация плавного перехода используя jQuery

Скрипт должен срабатывать по клику на ссылках, у которых атрибут href начинается с решетки "#". В jQuery это сделаем так:

$('a[href^="#"]').click(function(){
//Сохраняем значение атрибута href в переменной:
var target = $(this).attr('href');
$('html, body').animate({scrollTop: $(target).offset().top}, 800);
return false;
});

Для изменения значения отступа прокрутки сверху используется метод scrollTop. offset().top определяет значение отступа сверху для якоря (с id равному значению атрибута href), которое устанавливается в scrollTop

Плавность реализует функция animate.

В конце не забываем поставить return false; для отмены действия по умолчанию.

Скрипт можно разместить в HTML странице заключив в тег script или же подключить отдельным файлом (с расширением js) что позволит использовать это на всех страницах нашего сайта.


Теги: HTML jQuery плавная прокрутка страницы
2014-04-15

И еще полезные примеры JavaScript

Удалить елементы на странице по имени класса

Почему рассылки попадают в спам

вверх