Себе на форум поставил такой небольшой скрипт через шаблоны в админке.
Преимущества очевидны:
Не нужно лезть в php-шники
Удобно использовать
Привычный вид (подобие десктопной версии ВК)
Итак, реализация кнопки "наверх"
Открываем Стили->Шаблоны->overall_header.html
Код: Выделить всё
<div class="scrolltotop" style="display: block;">
<div class="scrolltotop__side"></div>
<div class="scrolltotop__arrow"></div>
</div>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('body').append("<div class='scrolltotop'><div class='scrolltotop__side'></div><div class='scrolltotop__arrow'></div></div>");
jQuery(window).scroll(function(){
if (jQuery(this).scrollTop() > 350) {
jQuery('.scrolltotop').fadeIn();
} else {
jQuery('.scrolltotop').fadeOut();
}
});
jQuery('.scrolltotop').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, 50);
return false;
});
});0
</script>
Потом добавляем стиль кнопки.
Открываем Стиль->Темы->stylesheet.css
Вставляем вниз
Код: Выделить всё
.scrolltotop {
display: none;
position: fixed;
width: 7%;
top: 0;
left: 0;
height: 100%;
z-index: 9000;
cursor: pointer
}
.ipsTooltip a:hover {
color: #fff;
text-decoration: none;
border-bottom: 0
}
.scrolltotop__side {
position: fixed;
width: 7%;
height: 100%;
top: 0;
left: 0;
background: black;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0.2);
-moz-opacity: 0.1;
-khtml-opacity: 0.1;
opacity: 0.1
}
.scrolltotop__arrow {
position: fixed;
width: 7%;
height: 100%;
top: 50px;
left: 0;
background: url(*адрес_кнопки.gif*) top no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.4)";
filter: alpha(opacity=0.4);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4
}Ширина блока и кнопки регулируется этим кодом {width: 7%}
Не забываем указывать адрес кнопки, поддерживаются как относительный, так и абсолютный адрес картинки
Вот такой вариант кнопки у меня
Сама кнопка скрыта пока находишься вверху страницы, стоит прокрутить колёсико мыши вниз, слева появляется блок при клике на который перемещаешься наверх.
Аналог работы кнопки можете увидеть в ВК полной версии.
Как реализовать перемещение обратно вниз на то же самое место (точная копия кнопки ВК) я пока не знаю.
