Я создал div, прикрепленный к нижней части экрана. При нажатии я хочу, чтобы он прокручивался до следующего класса. Я могу получить значение .top, но оно не прокручивается. У меня установлен jQuery, и я потратил 3 часа на то, чтобы попробовать все здесь. В проекте используется волшебная прокрутка, но я не знаю, как это использовать - я добавляю в существующий проект. Может ли это мешать его работе? Я бы просто использовал теги привязки, но кнопка должна быть на экране все время, когда пользователь прокручивает (поэтому одна кнопка делает все). Я пробовал это: прокрутить вверх/вниз до разделов с фиксированными кнопками - тот же результат, прокрутки не происходит
$(document).ready(function() {
$(document).on("click", ".next", function(e) {
topPos = $(".container").eq($(".container").index($('.container')) + 1); //find next container
console.log("Top" + topPos.position().top); //this outputs 1536.09375 for the second container
$('html, body').animate({
scrollTop: topPos
}, 1000);
});
}); .next {
bottom: 15px;
padding: 3%;
background-color: #d9d9d9;
padding: 22px 23px 26px 23px;
position: fixed;
right: 19%;
z-index: 99;
}
.down-arrow {
box-sizing: border-box;
height: 21px;
width: 21px;
border-style: solid;
border-color: white;
border-width: 0px 5px 5px 0px;
transform: rotate(45deg);
transition: border-width 150ms ease-in-out;
&:hover {
border-bottom-width: 4px;
border-right-width: 4px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="next">
<div class="down-arrow"></div>
</div>
<article>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nibh malesuada, imperdiet purus et, laoreet diam. Vivamus ullamcorper gravida magna, vitae rutrum nibh viverra id. Duis eu nibh dolor. Pellentesque congue a dui in volutpat. Ut non placerat
massa. Donec sollicitudin risus hendrerit tortor dignissim pharetra. Nam eu erat vel nulla elementum dictum consequat ut mauris. Donec egestas in nunc ut convallis. Fusce elit nisl, pulvinar et varius sed, sodales non elit. Duis a augue non quam
maximus volutpat. Proin rhoncus lacus tempor, laoreet massa nec, venenatis tellus. Suspendisse eros sem, convallis vel risus ac, ultrices mattis justo. Morbi sit amet lectus vestibulum, lobortis tortor sed, tempor mi. Aliquam pretium, risus egestas
sodales lobortis, sem sem vulputate elit, in lacinia neque tellus non elit.</p>
</div>
</article>
<article>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nibh malesuada, imperdiet purus et, laoreet diam. Vivamus ullamcorper gravida magna, vitae rutrum nibh viverra id. Duis eu nibh dolor. Pellentesque congue a dui in volutpat. Ut non placerat
massa. Donec sollicitudin risus hendrerit tortor dignissim pharetra. Nam eu erat vel nulla elementum dictum consequat ut mauris. Donec egestas in nunc ut convallis. Fusce elit nisl, pulvinar et varius sed, sodales non elit. Duis a augue non quam
maximus volutpat.</p>
</div>
</article>
<article>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nibh malesuada, imperdiet purus et, laoreet diam. Vivamus ullamcorper gravida magna, vitae rutrum nibh viverra id. Duis eu nibh dolor. Pellentesque congue a dui in volutpat. Ut non placerat
massa. Donec sollicitudin risus hendrerit tortor dignissim pharetra. Nam eu erat vel nulla elementum dictum consequat ut mauris. Donec egestas in nunc ut convallis. Fusce elit nisl, pulvinar et varius sed, sodales non elit. Duis a augue non quam
maximus volutpat. Proin rhoncus lacus tempor, laoreet massa nec, venenatis tellus. Suspendisse eros sem, convallis vel risus ac, ultrices mattis justo. Morbi sit amet lectus vestibulum, lobortis tortor sed, tempor mi. Aliquam pretium, risus egestas
sodales lobortis, sem sem vulputate elit, in lacinia neque tellus non elit.Fusce elit nisl, pulvinar et varius sed, sodales non elit. Duis a augue non quam maximus volutpat. Proin rhoncus lacus tempor, laoreet massa nec, venenatis tellus. Suspendisse
eros sem, convallis vel risus ac, ultrices mattis justo. Morbi sit amet lectus vestibulum, lobortis tortor sed, tempor mi. Aliquam pretium, risus egestas sodales lobortis, sem sem vulputate elit, in lacinia neque tellus non elit.</p>
</div>
</article>