Плавная прокрутка при нажатии на якорь: как переписать с jQuery на чистый JS?

Question

[MarkelovNNN]

Привет всем!

Ребята, только не отсылайте в поиск: пол дня сегодня искал, но так и не вышло задачу решить...

Мне нужна плавная прокрутка при нажатии на якорь ссылки на чистом js. Пробовал разные варианты на чистом js, работают, но якоря, которые содержат цифры (например, "#14") все при нажатии на них выдают ошибку.

Данный ниже вариант на jQuery такую ошибку не выдаёт и всё работает правильно, но ради небольшого кусочка грузить библиотеку jQuery совсем не хочется.

Подскажите, пожалуйста, как можно код ниже переписать на чистом js, при этом, чтобы якоря, содержащие цифры, также работали?

$('a[href^="#"]').on("click", function(event) {
	var target = $(this.getAttribute("href"));
	var offsetDownLarge = 88; // Большой отступ при зафиксированной «шапке»
	var offsetDownSmall = 13; // Маленький отступ при статичной «шапке»
	if (target.length) {
		event.preventDefault();
		var clientWidth = document.body.clientWidth;
		var offset = clientWidth >= 992 ? offsetDownLarge : offsetDownSmall; // Размер ширины экрана, начиная с которой применяется большой отступ
		var scroll = target.offset().top - offset;
		$("html, body").stop().animate( {
			scrollTop: scroll
		}, 1200); // Время прокрутки
	}
});

Comments

[camelCaseVlad]

function scrollTo(element, to, duration) {
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo(element, to, duration - 10);
    }, 10);
}

Answer 1

[Владимир Мацуев]

Можно использовать scrollIntoView

const anchors = document.querySelectorAll('a[href*="#"]')

anchors.forEach((anchor) => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault()
    
    const blockID = anchor.getAttribute('href').substr(1)
    
    document.getElementById(blockID).scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  })
})

А арифметику с отступами от шапки доверить css

В примерчике более подробно

Comments

[MarkelovNNN]

Спасибо! ))

[Константин Черкашин]

Владимир Мацуев а есть вариант реализовать это во vue?

Answer 2

[twobomb]

var scrollAnim;
document.querySelectorAll('a[href^="#"]').forEach(function(el){
el.addEventListener("click", function(event) {
  var target = document.querySelector(this.getAttribute("href"));
  if (target != null) {
    event.preventDefault();
  var scrollMaxHeight = Math.max( document.body.scrollHeight, document.body.offsetHeight,document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight );
    var scroll = target.offsetTop;
    clearTimeout(scrollAnim);
    var animTime = 1200;//ms
    var step = (scroll - window.scrollY)/60 / (animTime/1000);
    if(scrollMaxHeight - scroll <= window.innerHeight)
    	scroll = scrollMaxHeight - window.innerHeight;      
    (function(){    
      if(Math.abs(window.scrollY - scroll) <= Math.abs(step)){       
      	window.scrollTo( 0, scroll);
      	return;
      }
      window.scrollTo( 0,parseFloat(window.scrollY) + step);
      scrollAnim = setTimeout(arguments.callee,1000/60);
    })();
  }
});
});