Есть такой JS(для анимации скролла), подскажите пожалуйста где нужно поменять классы, что б он работал?
Есть такой JS(для анимации скролла), подскажите пожалуйста куда нужно подставлять свои классы?
$(".learn-more").on("click", "a", function(event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({
scrollTop: top
}, 1000);
})
Ответы (1 шт):
Автор решения: Danila
→ Ссылка
Нужно меню задать класс learn-more, ссылкам в меню установить значения href в виде якорей #link, а блокам, к которым предполагается скролл, добавить соответствующие id. Вот пример:
$(".learn-more").on("click", "a", function(event) {
event.preventDefault();
var id = $(this).attr('href');
var top = $(id).offset().top;
$('body,html').animate({
scrollTop: top
}, 1000);
}).blocks {
margin: 30px 0;
padding: 10px;
border: 1px solid black;
height: 300px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="learn-more">
<a href="#one">Блок 1</a>
<a href="#two">Блок 2</a>
<a href="#three">Блок 3</a>
</nav>
<div class="blocks" id="one">БЛОК 1</div>
<div class="blocks" id="two">БЛОК 2</div>
<div class="blocks" id="three">БЛОК 3</div>