Кнопка вверх как на phpBBex или в ВК

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
igorbond

Кнопка вверх как на phpBBex или в ВК

igorbond 19 окт 2014, 23:14 Сообщение

Как сделать такую же кнопку вверх, точнее более интересна полоска, чтобы вверх просто при нажатии переходило

Аватара пользователя
CabinetAdmin

Re: Кнопка вверх как на phpBBex или в ВК

CabinetAdmin 20 окт 2014, 15:30 Сообщение

Как на phpBBex - Подъём вверх страницы. jQuery

Такая же как в ВК. Перед </head> вставляете:

Код: Выделить всё

<script type="text/javascript">
$(document).ready(function() {
$('body').append('<div class="back-to-top" 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>');

$(window).scroll (function () {
if ($(this).scrollTop () > 100) {
$('.back-to-top').fadeIn();
} else {
$('.back-to-top').fadeOut();
}
});
$('.back-to-top').click(function(){
$('body,html').animate({scrollTop: 0}, 800);
return false;
});
$('.back-to-top').hover(function() {
$(this).animate({'opacity':'1',}).css({'background-color':'#e7ebf0','color':'#6a86a4'});
}, function(){
$(this).animate({'opacity':'0.7'}).css({'background':'none','color':'#d3dbe4'});;
});
});
</script>
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

igorbond

Re: Кнопка вверх как на phpBBex или в ВК

igorbond 20 окт 2014, 22:32 Сообщение

Спасибо, еще вопросик, не по форуму, у меня стоит кнопка вверх, на сайте вордпресс, не могли бы вы подсказать что и где нужно изменить, чтобы вместе со стрелкой у меня появилась и полоска, а то уже голову сломал, но не могу сделать. Спасибо Извините что не по теме
Вложения
totop-link.1.5.3.zip
(12.51 КБ) 100 скачиваний

Аватара пользователя
CabinetAdmin

Re: Кнопка вверх как на phpBBex или в ВК

CabinetAdmin 21 окт 2014, 14:42 Сообщение

В файле totop-link.css.php в #toTop { найти:

Код: Выделить всё

<?php echo $width.$height.$txtcolour1; ?>

удалить оттуда $height и добавить после этой конструкции height: 100%;. Это позволить растянуть полосу на всю высоту.

Найти #toTop:hover { и добавить после background: #e7ebf0;. Это цвет при наведении.
Найти #toTop img { - добавить после position: absolute; bottom: 40px;. Это позволить "прилепить" изображение к нижнему краю экрана.
Найти #toTop.totop-br {bottom:40px;right:10px;} - поменять все значения на 0.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

igorbond

Re: Кнопка вверх как на phpBBex или в ВК

igorbond 21 окт 2014, 20:01 Сообщение

Премного благодарен!!! Все же я уже давно говорил, это лучший ресурс !!!

Аватара пользователя
eska

Re: Кнопка вверх как на phpBBex или в ВК

eska 21 окт 2014, 20:07 Сообщение

Дело не совсем в ресурсе, а дело в администраторе, который бескорыстно помогает. По идее этот сайт должен держать все типовые строчки поисковиков, и это малое что можно сказать про этот ресурс.

igorbond

Re: Кнопка вверх как на phpBBex или в ВК

igorbond 21 окт 2014, 20:12 Сообщение

Ну это понятно, ведь хорошего ресурса без хорошей администрации просто не может быть

igorbond

Кнопка вверх как на phpBBex или в ВК

igorbond 23 дек 2014, 19:48 Сообщение

И еще вопросик, я сделал чтобы ширина полоски была 200, как раз до блока с текстом, а вот как сделать картинку по средине этой полосы?

Аватара пользователя
CabinetAdmin

Кнопка вверх как на phpBBex или в ВК

CabinetAdmin 23 дек 2014, 20:26 Сообщение

text-align: center;
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

igorbond

Кнопка вверх как на phpBBex или в ВК

igorbond 23 дек 2014, 20:51 Сообщение

CabinetAdmin писал(а):text-align: center;

Не помогло

Аватара пользователя
CabinetAdmin

Кнопка вверх как на phpBBex или в ВК

CabinetAdmin 24 дек 2014, 16:06 Сообщение

left: 10px; - поставить нужное количество.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект



Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 2 гостя