Вопрос как сделать так чтобы скроллбар опустился на определенную высоту при нажатии на кнопку

Question

Мне нужно настроить скроллбар чтобы когда пользователь нажимал на кнопку его плавно прокручивало до того места которое я точно обозначил сам. написанный html,css,js. Прошу объясните как можно это реализовать.

Answer 1

Вот вам пример. Обратите внимание, что я использовал id нужного элемента, чтобы до него докрутить.

document.getElementById('scrollButton').addEventListener('click', function() {
  var targetElement = document.getElementById('targetElement');
  
  // Получаем координаты целевого элемента
  var targetPosition = targetElement.getBoundingClientRect().top;
  
  // Вычисляем текущую позицию прокрутки
  var startPosition = window.pageYOffset || document.documentElement.scrollTop;
  
  // Вычисляем расстояние, которое нужно прокрутить
  var distance = targetPosition - startPosition;
  
  // Задаем скорость прокрутки (в пикселях в секунду)
  var speed = 500; // пикселей в секунду
  
  // Вычисляем время, необходимое для прокрутки
  var time = Math.abs(distance / speed) * 1000; // миллисекунды
  
  // Плавно прокручиваем до целевой позиции
  window.scrollTo({
    top: targetPosition,
    behavior: 'smooth'
  });
});

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/*Целевой элемент*/
#targetElement {
  height: 1000px;
  background-color: #f2f2f2;
}

/*Кнопка для скрола*/
#scrollButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
/*Элемент, чтобы занять место*/
.empty {
  height:600px;
}

<button id="scrollButton">Прокрутить</button>
<div class="empty">Просто, чтобы занять место</div>
<div id="targetElement">Целевой элемент</div>

БЛОГ НА HUSL

Вопрос как сделать так чтобы скроллбар опустился на определенную высоту при нажатии на кнопку

Ответы (1 шт):