Как сделать плавный скролл? [дубликат]

18 января 2022, 21:50

На этот вопрос уже даны ответы здесь:

Как сделать перемещение вверх страницы на jQuery? (3 ответа)

Закрыт 2 года назад.

Есть сайт генератор паролей. Там при нажатии на кнопку идет плавный скролл. Как сделать такой же?

Answer 1

$('#button').on('click', function () { 
    $('html, body').animate({ 
			scrollTop: $('[data-target]').offset().top 
		}, 300); 
});

body { 
  margin: 0; 
  padding: 0; 
} 
 
button { 
  width: 100%; 
  height: 40px; 
  line-height: 50px 
  display: block; 
  background-color: red; 
  font-size: 25px; 
  margin: 20px 0; 
} 
 
.target { 
  min-height: 50vh; 
  background-color: grey; 
} 
 
.target:nth-child(2n) { 
  background-color: pink; 
} 
 
[data-target] { 
  background-color: red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<button id="button">Клик</button> 
<div class="target"></div> 
<div class="target"></div> 
<div class="target"></div> 
<div class="target"></div> 
<div class="target"></div> 
<div class="target"></div> 
<div class="target"></div> 
<div class="target" data-target>Цель</div> 
<div class="target"></div> 
<div class="target"></div>