Плавная прокрутка страницы к якорю
Здравствуйте уважаемые читатели блога вебмастера! Сегодня мы поговорим о том, как сделать плавную прокрутку страницы к якорю с помощью jQuery.
Для начала, давайте разберёмся что такое якорь.
Якорь на сайте - это, когда мы кликая по ссылке можем переместиться в любое место, в зависимости от того, куда ведёт якорь.
Якорь создать очень легко. Обычно якоря используют на страницах захвата (landing page).
Для того чтобы сделать прокрутку страницы, нам необходимо создать блок с уникальным ID. К примеру:
<div id=”yakor”>Ваш текст</div>
Можно использовать любые теги, тоесть h2, p, a, главное чтобы был уникальный id.
А чтобы, прокрутка страницы к якорю заработала, нам необходимо создать ссылку с наименованием id, то есть:
<a href="#yakor">Переместиться к якорю</a>
Ладно с якорями всё понятно. Но тут встаёт вопрос, как же сделать плавную прокрутку страницы к якорю? Для этого к нам на помощь приходит любимый jQuery.
Здесь я выложу скрипт, который будет выполнять плавную прокрутку.
$(function() {
$('.menu a').click(function(event) {
event.preventDefault();
var href=$(this).attr('href');
var target=$(href);
var top=target.offset().top;
$('html,body').animate({
scrollTop: top
}, 1200);
});
});
Тут скрипт обрабатывается по клику в классе menu, где лежить a. То есть:
<ul class="menu">
<li><a href="#1">Первый якорь</a></li>
<li><a href="#2">Второй якорь</a></li>
</ul>
И да, не забыйте подключить jquery.
Если у вас возникли вопросы, можете написать через форму ниже. Надеюсь статья была полезна.
28.01.2016 / 5408
Есть div с неким id. На главной сделано меню [[pdoMenu? &parents = `0` &outerClass = `top-menu` &level = `1` &scheme=`abs` ]] такого вида… Ваш код не сработал. В псевдоним подставить нельзя…
то работают якоря. Но)) по всему коду расставляются хаотично
Причем именно контакты. И это ломает верстку…
то работают якоря. Но)) по всему коду расставляются хаотично
Причем именно контакты. И это ломает верстку…
В инлайне конструкция не будет работать корректно, поэтому надо брать код из инлайна и вставлять в $чанк, сам же $чанк в модуль компонента (pdoMenu). В самом же чанке уже можно будет делать всё что угодно — например оформить/задать условия на phx.
Я именно так и седал, как сказал. Всё работает корректно, а не хаотично.
Пример: Как вариант, если есть необходимость сделать только два якоря в меню