Сегодня хочу поделиться одной темой, она довольно не новая, но актуальная "Как сделать кнопку наверх страницы на сайте".
Наверняка Вы видели такие кнопки на сайтах, кто-то даже поставил себе на сайт. Я видел различные реализации но все они мне не понравились по различным причинам. На днях наткнулся на один интересный и легкий скрипт реализующий создание кнопки, которая позволяет быстро и плавно перемещаться в верхнюю часть сайта одним нажатием, что очень удобно.
Код
<style>.material-scrolltop {
display: block;
position: fixed;
width: 0;
height: 0;
bottom: 23px;
right: 23px;
padding: 0;
overflow: hidden;
outline: none;
border: none;
border-radius: 2px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
cursor: hand;
border-radius: 50%;
background: #4caf50;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
-ms-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
-moz-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
-o-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
}
.material-scrolltop:hover {
background-color: #4caf50;
text-decoration: none;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 3px 15px rgba(0, 0, 0, 0.5);
}
.material-scrolltop::before {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
content: "";
width: 0;
border-radius: 100%;
background: #66bb6a;
}
.material-scrolltop:active::before {
width: 120%;
padding-top: 120%;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.material-scrolltop.reveal {
width: 56px;
height: 56px;
}
.material-scrolltop span {
display: block;
font-size: 25px;
color: #fff;
}
.material-scrolltop,
.material-scrolltop::before {
background-image: url(http://webmaster-ucoz.ru/ucoz/1/vverkh/top-arrow.svg);
background-position: center 50%;
background-repeat: no-repeat;
}</style>
Код
<script src="http://webmaster-ucoz.ru/ucoz/1/vverkh/material-scrolltop.js"></script>
<button class="material-scrolltop" type="button"></button>
<script>
$(document).ready(function() {
$('body').materialScrollTop({
revealElement: 'header',
revealPosition: 'bottom',
onScrollEnd: function() {
console.log('Scrolling End');
}
});
});
</script>
0 комментариев
Комментариев еще нет, будьте первыми
Ошибка!