Как убрать анимацию?

01 июня 2021, 22:10

$("#nextCarousel").click(function(){
    $(".main-container").animate({
        scrollTop: $('.main-container').scrollTop() + 100
    });
});

Здравствуйте, как избавиться от анимации?

Код должен скролить блок на 100 пикселей при каждом нажатии на кнопку.

Answer 1

Я бы наверное как-то так бы сделал:

function scroll() { 
  let fromTop = $(window).scrollTop(); 
  let newScroll = fromTop + 100; 
  $(window).scrollTop(newScroll); 
} 
 
$("button").on("click", scroll)

.block { 
  height: 100px; 
  width: 100%; 
  border: solid; 
} 
 
.block+.block { 
  margin-top: 5px; 
} 
 
.btn { 
  position: fixed; 
  top: 20px; 
  left: 20px; 
  z-index: 1; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="main-container"> 
  <div class="block">block</div> 
  <div class="block">block</div> 
  <div class="block">block</div> 
  <div class="block">block</div> 
  <div class="block">block</div> 
  <div class="block">block</div> 
  <div class="block">block</div> 
  <div class="block">block</div> 
</div> 
<button class="btn">click</button>

В вашем же случае можно просто для animate поставить duration: 0.

Типа такого:

function scroll() { 
  let fromTop = $(window).scrollTop(); 
  let newScroll = fromTop + 100; 
  $("html, body").animate({ 
    scrollTop: newScroll 
  }, 0); 
} 
 
$("button").on("click", scroll)

.block { 
  height: 100px; 
  width: 100%; 
  border: solid; 
} 
 
.block+.block { 
  margin-top: 5px; 
} 
 
.btn { 
  position: fixed; 
  top: 20px; 
  left: 20px; 
  z-index: 1; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="main-container"> 
  <div class="block">block</div> 
  <div class="block">block</div> 
  <div class="block">block</div> 
  <div class="block">block</div> 
  <div class="block">block</div> 
  <div class="block">block</div> 
  <div class="block">block</div> 
  <div class="block">block</div> 
</div> 
<button class="btn">click</button>

Вот ваш код с duration 0:

$("#nextCarousel").click(function() {
    $(".main-container").animate({
        scrollTop: $('.main-container').scrollTop() + 100
    }, 0);
});

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Iframe emded не загружается на маленьком разрешении

На сайте используется следующий код:

HTML

Растянуть несколько div в div 100% css

Подскажите пожалуйста, как растянуть дочерние div в родительском div который имеет width: 100%;Таблица не подходит

106

Конвертация int to uint

если прибавлять или вычитать при том что полученное число будет положительным, то никаких проблем, но если при вычитании на выходе число...

119

Как правильно получить данные webhook через ASP.NET core [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском

103