Персональный сайт Дмитрия Журавлева

Написал свой скроллер, который перематывает страницу в самый вверх, а при повторном клике обратно.

Знаете такая раздражающая панель, которая вылазит слева, если туда мышкой навести?
Вот я её зачем-то сделал. :)

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

Я себе такое на сайт ни за что не поставлю, но многим нравится. :)

Меня эта штука раздражает, потому что я как раз иногда намеренно кликаю в самую левую часть сайта, чтобы сбросить фокус. Т.е., например, убрать курсор клавиатуры из поля ввода, гарантированно никуда не кликнув по пути. А там вместо этого перемотчик этот бесячий.

Протестировать можно, если наведете курсор сейчас к левой кромке сайта.

В общем, вот код:

<style>
#scrollerToTop { background-color: rgba(160, 160, 160, 0.5); width: 0px; position: fixed; top: 0px; left: 0px; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; cursor: pointer; }
#scrollerToTopInner {border: 0px solid red; font-size: 36px; color: #fefefe; transform: rotate(90deg); user-select: none;  padding-bottom: 6px;}
</style>

<div id="scrollerToTop">
<div id="scrollerToTopInner">
&&aquo;&nbsp;&raquo;
</div>
</div>

<script>
document.addEventListener('mousemove', checkMouseMoveOverLeftScroller);
var scrollerToTop = document.getElementById('scrollerToTop');
scrollerToTop.addEventListener('click', handleScrollerToTopClick);
scrollerToTop.previousYPosition = 0;

function checkMouseMoveOverLeftScroller(e)
{
	var nowScrollerWidth = window.getComputedStyle(scrollerToTop).width;

	if (e.clientX < 40)
	{
		if (nowScrollerWidth !== '40px')
		{
			// console.log('Показываю левый скроллер');
			scrollerToTop.style.width = '40px';
		}
	}
	else
	{
		if (nowScrollerWidth === '40px')
		{
			// console.log('Прячу левый скроллер');
			scrollerToTop.style.width = '0px';
			// Можно сбрасывать предыдущее положение после пропадания скроллера, тогда нельзя будет повторным кликом вернуться обратно при повторном показе скроллера.
			// scrollerToTop.previousYPosition = 0;
		}
	}
}

function handleScrollerToTopClick()
{
	if (window.scrollY == 0)
	{
		if ( scrollerToTop.previousYPosition > 0)
		{
			window.scrollTo(0, scrollerToTop.previousYPosition);
		}
	}
	else
	{
		scrollerToTop.previousYPosition = window.scrollY;
		window.scrollTo(0, 0);
	}

}

</script>