Кнопка Вверх для сайта на javascript/jQuery

В этот раз мы рассмотри довольно популярную фичу для сайта. Кнопка "Вверх" придает сайту динамичность и в некоторые моменты очень удобна и полезна для вашего посетителя. Идея следующая: при скроллинге страницы на определенном уровне появляется симпатичная кнопочка с изображением стрелочки наверх. При клике на нее страница плавно скроллится наверх. Особенно важна такая кнопка для страниц с длинным контентом.

Для реализации такого функционала достаточно нескольких строк javascript\jQuery, нет необходимости искать готовые скрипты, библиотеки, плагины. Верстаем кнопочку, располагаем на экране с помощью фиксированного позиционирования и прячем ее. Следом добавляем следующий код:

Код, отвечающий за отображение кнопки:

		$(window).scroll(function(){	//определяем событие скроллинга
			var windowpos = $(window).scrollTop();	//определяем уровень прокрученной страницы
			if(windowpos < 5) {	//если не ниже 5 пикселей от топа - скрываем кнопку
				$('.top').fadeOut(500);
			} else {	//иначе показываем
				$('.top').fadeIn(500);
			}
		});
		var windowpos = $(window).scrollTop();	//соответственно при открытии страницы нам также 
		if(windowpos < 5) {						//необходимо определить уровень страницы
			$('.top').fadeOut(500);
		} else {
			$('.top').fadeIn(500);
		}
	

Клик по кнопке и непосредственно скроллинг к топу:

		$.fn.scrollToTop=function(){
			$(this).click(function(){  //определяем клик по кнопке
				$("html, body").animate({scrollTop:0},"normal");  //скроллим средней скоростью страницу к верху
			})
		}
		$(".top").scrollToTop(); //подвязываем функцию к кнопке вверх
	

Демо-пример приводить не буду, на сайте на левой панели расположена кнопка "Вверх".