Кнопка "Наверх" как в Контакте

[leha85]

Это тема поддержки статьи: Кнопка "Наверх" как в Контакте. Здесь вы можете обсудить все вопросы, связанные с этой статьёй. Дата добавления статьи: 22 Май 2014 - 17:13 Дата обновления статьи: 22 Май 2014 - 17:13

[andreylogan]

Вместо треугольника "вверх" отображается знак вопроса, как исправить проблему?

[vsved]

Не работает!    ipb 3.4.5

[GothSilvio]

Вместо треугольника "вверх" отображается знак вопроса, как исправить проблему?

Видимо в кодировках вашего форума нет этого символа. Замените треугольник на удобный вам знак, найдя в скрипте:

▲ Вверх

[RealUser]

Не работает!    ipb 3.4.5

Опишите суть проблемы более подробно. Экстрасенсов тут нет!

[vsved]

Всё нормально. Криво стал хук jQuery. Переставил его и заново добавил код. Круто теперь. Удобно просто не понятно как без этого жил! Спасибо!

[vsved]

А еще предложение сделать такую же кнопку справа, только "ВНИЗ". Иногда очень не хватает. 

[andreylogan]

А еще предложение сделать такую же кнопку справа, только "ВНИЗ". Иногда очень не хватает. 

Ага! Точняк. Мне тож такая идея нравится. 

[RealUser]

А еще предложение сделать такую же кнопку справа, только "ВНИЗ". Иногда очень не хватает. 

 

 

Ага! Точняк. Мне тож такая идея нравится. 

 

Переписывайте код.... Бесплатно, думаю (именно думаю!) никто не сделает

[vsved]

Как добавить кнопку разобрался. Но вот теперь нужно прокрутку вниз сделать. А для этого нужно вводить определения размера окна, а потом scrollTop до этой величины, т.к. не существует scrollBottom . Выделили жирным этот кусок для замены. Помогите, ибо я не программист.

 

<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 () > 50) {

jQuery ('.button-down').fadeIn();

} else {

jQuery ('.button-down').fadeOut();

}

});

 

jQuery('.button-down').click(function(){

jQuery('body,html').animate({

scrollTop: 0

}, 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> 

Изменено 30 июля, 2014 пользователем vsved

[vsved]

Поставил большое значение scrollTop: 50000

Криво конечно, но крутит до самого низа! 

[vsved]

Вот окончательный вариант кнопки вниз! Пользуйте!

<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> 

Идет прокрутка вниз до окна "Ответить"

[vsved]

jQuery('.button-down').click(function(){
jQuery("html, body").animate({ scrollTop: jQuery(document).height() }, 800);
return false;
});

И всё-таки, вот так лучше. Ибо нет окна "Ответить" на главной странице.

[rabb1t1]

Эта кнопка у меня появляется только при наведении мыши. А как сделать что бы она появлялась без наведения?

[rustav]

Работает на 3.4.х НО не перед </head> , а после, так же есть такая проблема, если опуститься вниз, потом нажать кнопку "вверх" и после нажать "изменить сообщение", то редактирование будет в html, а не как обычно. При этом если нажать "отмену" и снова нажать "изменить", то редактирование будет обычное.