Пишу эту статью в разделе о вёрстке, так как она всё же ближе к ней, чем к чему-либо другому. Итак, клиент запросил создать кнопку прокрутки экрана вверх и, внимание, это не обычная практика вверх. Более того кнопка должна была находиться постоянно видимой и просто красиво поворачиваться, предлагая прокрутку вниз или вверх.
Начнём с 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
Varvara
- 15 июня 2019, 23:00 0 ↓Роман
- 22 июня 2019, 13:04 0 ↑ ↓Марина
- 30 апреля 2020, 02:26 0 ↓P.S один -webkit-transition в css .scrollup-btn лишний попал ;)
BSamedi
- 30 апреля 2020, 14:35 0 ↑ ↓