Якорь — закладка с уникальным именем в любом месте веб-странице, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.
Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки «#» впереди:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://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) что позволит использовать это на всех страницах нашего сайта.
and then Add to Home Screen.