Делаем стильную кнопку прокрутки страницы вверх и вниз

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

Начнём с HTML кода самой кнопки:

    
        Вверх
    

Затем, напишем стили для нашей кнопки. Изображение скачиваем тут: https://yadi.sk/d/JdxmVjINVfBhuA

    .wrapper-scroll-btn{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 3;
		width: 100%;
		height: 0;
		box-sizing: border-box;
		color: #4b4c4c;
	}
	.wrapper-scroll-btn > span{
		position: relative;
		max-width: 1920px;
		margin: 0 auto;
		display: block;
		color: #4b4c4c;
	}
	.scrollup-btn {
		cursor:pointer;
		outline: none!important;
		color: #4b4c4c;
		position: absolute;
		right: 30px;
		bottom: 6px;
		width: 48px;
		height: 48px;
		font-size: 14px;
		-text-align: center;
		text-transform: uppercase;
		text-indent: -999em;
		line-height: 35px;
		background: url(../images/bg_topbutton.png) no-repeat left top;
		background-size: 100% 100%;
		overflow: hidden;
		transform: rotate(180deg) translateZ(1px);
		-webkit-transform: rotate(180deg) translateZ(1px);
		-moz-transform: rotate(180deg) translateZ(1px);
		-o-transform: rotate(180deg) translateZ(1px);
		-ms-transform: rotate(180deg);
		transition: all .45s cubic-bezier(0.175,0.885,0.320,1.275);
		-webkit-transition: all .45s cubic-bezier(0.175,0.885,0.320,1);
		-ms-transition: all .45s cubic-bezier(0.175,0.885,0.320,1.275);
		-moz-transition: all .45s cubic-bezier(0.175,0.885,0.320,1.275);
		-o-transition: all .45s cubic-bezier(0.175,0.885,0.320,1.275);
		background-color: #4b4c4c;
		border-radius: 50%;		
	}
	.scrollup-btn.rotate{
		transform: rotate(360deg) translateZ(1px);
		-webkit-transform: rotate(360deg) translateZ(1px);
		-moz-transform: rotate(360deg) translateZ(1px);
		-o-transform: rotate(360deg) translateZ(1px);
		-ms-transform: rotate(360deg);
	}

Теперь добавим немного JQuery.

    var navPos, winPos;
	function refreshVar() {
		navPos = $('header').offset().top;
	}
	refreshVar();
	$(window).resize(refreshVar);
    $(window).scroll(function() {
		winPos = $(window).scrollTop();
		if (winPos > navPos) {
			$('.scrollup-btn').addClass('rotate');
		}else{
			$('.scrollup-btn').removeClass('rotate');
		}
	});
    $('.scrollup-btn').click(function(){
		if($(this).hasClass('rotate')){
			$('body,html').animate({ scrollTop:0 },800);
		}else{
			$('body,html').animate({ scrollTop:$(document).height() },800);
		}
	});

Собственно, это всё.

Пример, можно посмотреть тут: https://okna-raiv.ru