Плавное передвижение по ссылкам "якорям"

[valper]

Доброго времени суток. Сайт OcStore 2.1 с кнопкой вида <a href="#product" class="btn btn-primary">Узнать больше</a> по нажатию, якорь моментально перекидывает на блок с соответствующим ID. Как сделать этот переход более плавным?

[Гість smartcoder]

Это добавьте в поле скриптов или в footer

<script type="text/javascript">
 $(document).ready(function(){
    $("#menu").on("click","a", function (event) {
        event.preventDefault();
        var id  = $(this).attr('href'),
            top = $(id).offset().top;
        $('body,html').animate({scrollTop: top}, 1500);
    });
});
</script>

 

Затем каждому меню присваивайте id menu

<nav id="menu">
    <ul>
        <li><a href="#anchor1">Ссылка на якорь 1</a></li>
        <li><a href="#anchor2">Ссылка на якорь 2</a></li>
        <li><a href="#anchor3">Ссылка на якорь 3</a></li>
        <li><a href="#anchor4">Ссылка на якорь 4</a></li>
    </ul>
</nav>