Установка
1. В таблицу стилей вставляем код:
Код
.cd-top {
background-color: rgb(51, 122, 183);
bottom: 0px;
color: rgb(255, 255, 255);
display: inline-block;
font-size: 18px;
line-height: 24px;
position: fixed;
opacity: 0;
right: 0px;
text-align: center;
text-decoration: none;
-webkit-transform: scale(5) translate(47px,-10px);
-moz-transform: scale(5) translate(47px,-10px);
-o-transform: scale(5) translate(47px,-10px);
-ms-transform: scale(5) translate(47px,-10px);
transform: scale(5) translate(47px,-10px);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
visibility: hidden;
white-space: nowrap;
width: 100%;
}
.cd-top.cd-is-visible, .no-touch .cd-top:hover {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.cd-top.cd-is-visible {
opacity: 0.9;
-webkit-transform: scale(1) translate(0px,0px);
-moz-transform: scale(1) translate(0px,0px);
-o-transform: scale(1) translate(0px,0px);
-ms-transform:scale(1) translate(0px,0px);
transform: scale(1) translate(0px,0px);
visibility: visible;
}
.cd-top.cd-is-visible:hover {
color: rgb(255, 255, 255);
opacity: 1;
}
.cd-top:hover {
text-decoration: none;
}
.cd-top .fa {
padding: 25px 25px;
}
.cd-top span:last-child {
padding: 25px 8px;
}
@media (min-width: 768px) {
.cd-top {bottom: 90px;
width: auto;
right: -158px;
}
.cd-top:hover {
right: 0px;
}
.cd-top .fa {
border-right: 1px solid rgb(71, 142, 203);
}
}
background-color: rgb(51, 122, 183);
bottom: 0px;
color: rgb(255, 255, 255);
display: inline-block;
font-size: 18px;
line-height: 24px;
position: fixed;
opacity: 0;
right: 0px;
text-align: center;
text-decoration: none;
-webkit-transform: scale(5) translate(47px,-10px);
-moz-transform: scale(5) translate(47px,-10px);
-o-transform: scale(5) translate(47px,-10px);
-ms-transform: scale(5) translate(47px,-10px);
transform: scale(5) translate(47px,-10px);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
visibility: hidden;
white-space: nowrap;
width: 100%;
}
.cd-top.cd-is-visible, .no-touch .cd-top:hover {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.cd-top.cd-is-visible {
opacity: 0.9;
-webkit-transform: scale(1) translate(0px,0px);
-moz-transform: scale(1) translate(0px,0px);
-o-transform: scale(1) translate(0px,0px);
-ms-transform:scale(1) translate(0px,0px);
transform: scale(1) translate(0px,0px);
visibility: visible;
}
.cd-top.cd-is-visible:hover {
color: rgb(255, 255, 255);
opacity: 1;
}
.cd-top:hover {
text-decoration: none;
}
.cd-top .fa {
padding: 25px 25px;
}
.cd-top span:last-child {
padding: 25px 8px;
}
@media (min-width: 768px) {
.cd-top {bottom: 90px;
width: auto;
right: -158px;
}
.cd-top:hover {
right: 0px;
}
.cd-top .fa {
border-right: 1px solid rgb(71, 142, 203);
}
}
2. А этот код в нижнюю часть сайта:
Код
<a href="#0" class="back-to-top cd-top"><span class="fa fa-chevron-up"></span> <span>Поднятся на верх</span></a><script>
$(window).scroll(function() {
($(this).scrollTop() > ($('header').height() + 200)) ? $('.back-to-top').addClass('cd-is-visible') : $('.back-to-top').removeClass('cd-is-visible cd-fade-out');
}).trigger('scroll');
$(window).resize(function() {
var right = (($(window).width() - $('section').width())/2)+95;
if ($('nav.sidebar').hasClass('affix')) {
$('nav.sidebar').css('right', right+'px');
}
}).trigger('resize');
$('.back-to-top').on('click', function(event) {
event.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
</script>
$(window).scroll(function() {
($(this).scrollTop() > ($('header').height() + 200)) ? $('.back-to-top').addClass('cd-is-visible') : $('.back-to-top').removeClass('cd-is-visible cd-fade-out');
}).trigger('scroll');
$(window).resize(function() {
var right = (($(window).width() - $('section').width())/2)+95;
if ($('nav.sidebar').hasClass('affix')) {
$('nav.sidebar').css('right', right+'px');
}
}).trigger('resize');
$('.back-to-top').on('click', function(event) {
event.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
</script>