JavaScript: делаем прокрутку на сайте вверх-вниз, без использования jQuery

В html коде страницы создаём в любом месте в пределах тега body (лишь бы не внутри любого другого контейнера),

<div id="scrollBack" onClick="scrollBack()"></div>

в пределах тегов <head></head> пишем следующий код:

var oldPos;
window.onscroll = function() {

	var scrolled = window.pageYOffset || document.documentElement.scrollTop;

	if (scrolled>0){
		document.getElementById('scrollBack').style.visibility = 'visible';
		document.getElementById('scrollBack').innerHTML = 'Up'; //здесь можно подставить например картинку со стрелкой вверх
	}
	else
	{
		document.getElementById('scrollBack').innerHTML = 'Down';// а здесь можно подставить например картинку со стрелкой ввниз
	}
}

function scrollBack(){

	if (window.pageYOffset || document.documentElement.scrollTop > 0){
		oldPos = window.pageYOffset || document.documentElement.scrollTop;
		window.scrollTo(0,0);
	}
	else{
		window.scrollTo(0,oldPos);
	}
}

а в стилях настраиваем нашу панельку с id scrollBack таким образом, чтобы она была слева, зафиксированна, и необходимой длины (я для примера использовал 100%ную высоту)

вот содержимое моего css:

#scrollBack {
			position: fixed;
			left: 1px;
			top: 0px;
			width: 80px;
			height: 100%;
			opacity: 0;
			font-family: sans-serif;
			font-weight: bold;
			font-size: 0.5em;
			color: #000088;
			background: #e0e0ff;
			border: 1px solid #fff;
			padding: 2px;}
#scrollBack:hover {opacity: 0.8;}

Leave a Reply Cancel reply