Скрипт плавного скролла WordPress

Всем привет!

Недавно столкнулся с типичной задачей на сайте WordPress — нужно было сделать плавный скролл к целевому элементу на странице при нажатии на ссылку в меню сайта. Собственно, это — стандартный функционал любого современного лендинга. В нашем случае задача состояла в использовании чистого JavaScript без подключения внешних фреймворков, например, jQuery.
В сети есть не мало плагинов для WordPress для плавного скроллинга, например, https://ru.wordpress.org/plugins/tags/smooth-scroll
Но мы все знаем, что добавление любого плагина в наш сайт снижает его безопасность на взлом. В большинстве случаев сайты на WordPress взламываются именно через плагины — делаем выводы!
Итак, написан следующий код для медленного (плавного) скроллинга по странице:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

document.addEventListener("click", function (event) {
	var target = event.target;
	if (event.target.getAttribute("href")) {
		var targetHref = event.target.getAttribute("href")
	} else return false;
	if (targetHref.indexOf("#") >= 0) {
		var pos = targetHref.indexOf("#") + 1;
		var elemHref = document.getElementById(targetHref.slice(pos));
		moveScroll(elemHref);
		event.preventDefault()
	};
});
function moveScroll(elem) {
	var travel = 40;
	var time = 10;
	if (Math.abs(elem.getBoundingClientRect().top) < 1) return false;
	if (elem.getBoundingClientRect().top < 0) {
		if (Math.abs(elem.getBoundingClientRect().top) < travel) { window.scrollBy(0,-1); setTimeout(moveScroll,time/5,elem); } else { window.scrollBy(0,-travel); setTimeout(moveScroll,time,elem); } }; if (elem.getBoundingClientRect().top > 0) {
		if (Math.abs(elem.getBoundingClientRect().top) < travel) {
			window.scrollBy(0,1);
			setTimeout(moveScroll,time/5,elem);
			} else {
			window.scrollBy(0,travel);
			setTimeout(moveScroll,time,elem);
		}
	}	
};

Функция скроллинга запускается рекурсивно через промежутки времени, равные time = 10 мс.
travel = 40 — это ход вертикального скроллинга при каждом рекурсивном вызове функции.
Представленный скрипт работает для ссылок вида:

1

About us

т.е. скрипт проверяет, есть ли в ссылке обращение к ID элемента, к которому, собственно, и прокрутиться наша страница.

На сегодня всё — спасибо за прочтение заметки!