Якорь - закладка с уникальным именем в любом месте веб-странице, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.
Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута 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) что позволит использовать это на всех страницах нашего сайта.
