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

В последнее время стал делать переход через аттрибут тегов. Таким образом не привязываюсь к классу или айдишнику, который могут поменять.
В разметке выглядит таким образом
<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);
    });
});

Нет комментариев