Плавний скролінг HTML сторінки до потрібного елементу

Допустимо ваша сторінка має елементи навігації, при натисканні на які, ви хочете, щоб сторінка плавно прокручувалась до потрібних елементів.

По-перше, нам доведеться підключити бібліотеку jQuery, а також напишемо наступну функцію.

/**
 * @param {Object} elementObj
 * @param {number} intPaddingTop, px
 * @param {number} intSpeedScroll, ms
 */
function scrollToElement(elementObj, intPaddingTop, intSpeedScroll) {
 
  intPaddingTop = intPaddingTop || 10; /* Default 10px */
  intSpeedScroll = intSpeedScroll || 200 /* Default 200ms */
  var scrollTop = $(elementObj).offset().top - intPaddingTop;

  $('html, body').animate({
    scrollTop: scrollTop
  }, intSpeedScroll);
}

Першим параметром ця функція приймає об’єкт DOM, до якого потрібно прокрутити сторінку. Другий і третій параметри – не обов’язкові.

Другим параметром можна встановити відступ у пікселях від верхнього краю вікна до необхідного елемента після переміщення. За замовчуванням – 10. Третій параметр – це швидкість прокручування сторінки в мілісекундах. За замовчуванням – 200.

Залишилося лише додати виклик цієї функції при натисканні на елемент навігації та передати об’єкт.

Наприклад:

<a href="#element">Go to element</a>
 
<!-- Some page content... -->
 
<div id="#element">Content of element</div>
 
<script>
  $('a[href^="#"]').on('click', function(event) {
    event.preventDefault();
    scrollToElement($(this).attr('href'));
  });
</script>

Примітка: Допускається і рекомендується передача в функцію параметром не самого об’єкта DOM, а його унікального ідентифікатора.

Наприклад:

scrollToElement('#element');