Плавный переход к элементу

JavaScript
1 ноября 2018, 23:06

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

<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);
    });
});