Плавный скроллинг 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');