Плавный переход к элементу
В последнее время стал делать переход через аттрибут тегов. Таким образом не привязываюсь к классу или айдишнику, который могут поменять.
В разметке выглядит таким образом
В разметке выглядит таким образом
<div class="header__menu">
<ul>
<li><a href="#" data-goto=".about">О компании</a></li>
<li><a href="#" data-goto=".structure">Наш сервис</a></li>
<li><a href="#" data-goto=".benefit">Ваши выгоды</a></li>
<li><a href="#" data-goto=".location">Контакты</a></li>
</ul>
</div>
Понятно, что можно обращаться через селектор по своему усмотрению, например, к id элемента вот так:<a href="#" data-goto="#footer">Контакты</a>
Обработчик этого события у меня имеет вот такой вид:$(function() {
$('body').on('click', '[data-goto]', function(e) {
e.preventDefault();
var selector = $(this).attr('data-goto');
$('html, body').animate({ scrollTop: $(selector).offset().top}, 1200);
});
});
Нет комментариев