Код: Выделить всё
<div>
<a id="bottom" class="anchor" accesskey="z"></a>
<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>
Код: Выделить всё
<div class="go_up"><svg viewBox="0 0 9 7" width="14" height="14"><path d="M1 6l3.5-4L8 6" fill="none"></path></svg></div>
Код: Выделить всё
.go_up {
-webkit-transition: background-color 200ms ease-out,opacity 200ms ease-out;
-moz-transition: background-color 200ms ease-out,opacity 200ms ease-out;
transition: background-color 200ms ease-out,opacity 200ms ease-out;
opacity: 0;
width: 60px;
background-color: transparent;
cursor: pointer;
height: 100%;
left: 0;
position: fixed;
top: 0;
bottom: 0;
z-index: 5000;
text-align: center;
padding-top: 10px;
visibility: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.go_up.fixed {
opacity: 1;
visibility: visible;
}
.go_up.fixed svg {
-webkit-transition: stroke 2000ms;
-moz-transition: stroke 2000ms;
transition: stroke 2000ms;
stroke: #979797;
stroke-width: 2px;
}
.go_up.fixed:hover {
background-color: rgba(191,191,193,.2);
}
@media (max-width: 1024px) {
.go_up.fixed {
background-color: rgba(191,191,193,.3);
width: 40px;
height: 30px;
top: auto;
}
}
@media (max-width: 1024px)
минимальная ширина вертикальной кнопки, после она уже выводится в виде кнопки снизу.Скрипт:
Код: Выделить всё
<script>
jQuery(function($) {
/* Go Up */
var panel = ($(window).scrollTop()>400)?$('.go_up').addClass('fixed'):$('.go_up');
$(window).scroll(function(){
if( $(this).scrollTop() > 400 && !panel.hasClass('fixed')){
panel.addClass('fixed');
} else if($(this).scrollTop() < 400 && panel.hasClass('fixed')){
panel.removeClass('fixed');
}
});
$(".go_up").click(function(event){
$('html, body').animate({scrollTop:0}, 500);
});
});
</script>
Вот чтобы как в вк, т.е. поле со стрелкой во всю пустоту слева, то стили будут такие:
Код: Выделить всё
.go_up {
-webkit-transition: background-color 200ms ease-out,opacity 200ms ease-out;
-moz-transition: background-color 200ms ease-out,opacity 200ms ease-out;
transition: background-color 200ms ease-out,opacity 200ms ease-out;
opacity: 0;
width: 50%;
background-color: transparent;
cursor: pointer;
height: 100%;
left: 0;
position: fixed;
top: 0;
bottom: 0;
z-index: 1;
text-align: left;
padding-top: 15px;
visibility: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.go_up.fixed {
opacity: 1;
visibility: visible;
}
.go_up.fixed svg {
-webkit-transition: stroke 2000ms;
-moz-transition: stroke 2000ms;
transition: stroke 2000ms;
stroke: #979797;
stroke-width: 2px;
padding: 2px 23px;
}
.go_up.fixed:hover {
background-color: rgba(191,191,193,.2);
}
@media (max-width: 1300px) {
.go_up.fixed {
background-color: rgba(191,191,193,.3);
width: 40px;
height: 25px;
top: auto;
text-align: center;
z-index: 9;
}
.go_up.fixed svg {
padding: 0;
}
}
@media (max-width: 1300px)
нужно подгонять по месту, это значение для стандартного просильвера.