Что бы увидеть email и телефон, включите JavaScript.

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


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

Начнём с 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

Теги материала: HTML Вёрстка
Понравилась статья, поделитесь ей с друзьями!
RSS подписка по электронной почте


коммент.

avatar

Varvara

- 15 июня 2019, 23:00
спасибо за материал, но увы, для тех кто не шарит он не подходит, а для тех кто шарит бесполезен. Вот мне понятно куда стили добавлять и все. Ну первую часть наверное в хедер а может и нет и не уверенна, что на modx он вообще есть.А jquery и вовсе не понятно куда пихать((
avatar

Роман

- 22 июня 2019, 13:04
Доброго времени суток, Варвара! HTML код вставляете в чанк того же footer prntscr.com/o57bb6 ну или где-нибудь поближе к закрывающему тегу body. Стили и скрипт открываете любую страницу сайта и по правой клавише prntscr.com/o57bzp посмотреть код страницы, смотрите его. Смотрите путь до файла css (можете любой выбрать) в его конец дописываете стили. Затем смотрите так же какой-нибудь файл jquery prntscr.com/o57cjf и так же в его конец дописываете код. Конечно, это не изящно и тру веб-девелоперы, судорожно перекрестятся, но работать будет, эта конструкция вполне, при этом ошибок или еще чего не должно появится.
avatar

Марина

- 30 апреля 2020, 02:26
Отличный пример. Переделала под свой проект, спасибо большое за публикацию!

P.S один -webkit-transition в css .scrollup-btn лишний попал ;)
avatar

BSamedi

- 30 апреля 2020, 14:35
О, спасибо за внимательность подправил :)

Написать комментарий

Ваш email не будет опубликован. Обязательные поля отмечени символом *