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

139

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 не загружается на маленьком разрешении

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

128

HTML

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

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

152

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

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

171

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

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

155