Делаем кнопку "Вверх"

[Salvacore]

Чтобы сделать подобную кнопку, необходимо добавить в шаблон globalTemplate (перед </head>) следующий скрипт:

<script type="text/javascript">
jQuery(document).ready(function() {

// Виджет кнопки вверх (Test-Templates)
// Версия 1.0

jQuery('body').append('<div class="button-up" style="display: none;opacity: 0.7;width: 80px;height:100%;position: fixed;left: 0px;top: 0px;cursor: pointer;text-align: center;line-height: 30px;color: #d3dbe4;font-weight: bold;">▲ Вверх</div>');

jQuery (window).scroll (function () {
if (jQuery (this).scrollTop () > 100) {
jQuery ('.button-up').fadeIn();
} else {
jQuery ('.button-up').fadeOut();
}
});

jQuery('.button-up').click(function(){
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});

jQuery('.button-up').hover(function() {
jQuery(this).animate({
'opacity':'1',
}).css({'background-color':'#e7ebf0','color':'#6a86a4'});
}, function(){
jQuery(this).animate({
'opacity':'0.7'
}).css({'background':'none','color':'#d3dbe4'});;
});

});
</script>
http://ipbmafia.ru/uploads/monthly_05_2014/tutorials-6351-0-57393900-1400760778.jpg

[MrBurn]

На скрине она залазит на шаблон

[Salvacore]

На скрине она залазит на шаблон

http://breedpmnr.ru/6EEA5F - Белая потому что нажата.

[Osetin]

Можно еще кнопку ''Вниз добавить''


<script type="text/javascript">
jQuery(document).ready(function() {

// Виджет кнопки вниз (Test-Templates)
// Версия 1.0

jQuery('body').append('<div class="button-down" style="display: none;opacity: 0.7;width: 80px;height:100%;position: fixed;right: 0px;top: 0px;cursor: pointer;text-align: center;line-height: 30px;color: #d3dbe4;font-weight: bold;">▼ Вниз</div>');

jQuery (window).scroll (function () {
if (jQuery (this).scrollTop () >= 0) {
jQuery ('.button-down').fadeIn();
} else {
jQuery ('.button-down').fadeOut();
}
});

jQuery('.button-down').click(function(){
jQuery("html, body").animate({ scrollTop: jQuery("#fast_reply_wrapper").offset().top }, 800);
return false;
});

jQuery('.button-down').hover(function() {
jQuery(this).animate({
'opacity':'1',
}).css({'background-color':'#e7ebf0','color':'#6a86a4'});
}, function(){
jQuery(this).animate({
'opacity':'0.7'
}).css({'background':'none','color':'#d3dbe4'});;
});

});
</script>