Доброго времени суток, дорогие читатели. Оригинальная кнопка вверх для блога во всю ширину страницы. Вполне современный дизайн. Думаю, что вашим посетителям понравится такое не стандартное решение кнопки вверх которая появится при скроллинге страницы.
Установка займёт считанные минуты, да и настройки внешнего вида тоже. Чтобы посмотреть, как она выглядит и проверить её в работе, перейдите на тестовый блог
<script type="text/javascript">$('body').append('<div class="upbtn"></div>');
$(window).scroll(function() {
if ($(this).scrollTop() > 350) {
$('.upbtn').css({
bottom: 0
});
} else {
$('.upbtn').css({
bottom: '-80px'
});
}
});
$('.upbtn').on('click',function() {
$('html, body').animate({
scrollTop: 0
}, 500);
return false;
});</script>
<style>.upbtn {
z-index: 9999;
width: 100%;
height: 16px;
color: #FFF;
position: fixed;
bottom: -80px;
cursor: pointer;
background: #4e9c60;
transition: all .3s ease-in-out;
}
.upbtn:before {
content: "";
transition: all .3s ease-in-out;
z-index: 9999;
width: 100px;
height: 100px;
border: 14px solid #4e9c60;
position:relative;
bottom:10px;
left: 50%;
margin-left: -50px;
cursor: pointer;
display:block;
transform: rotate(45deg);
background: #FFF;
}
.upbtn:hover {
height: 20px;
}
.upbtn:hover:before {
bottom:12px;
}</style>
$(window).scroll(function() {
if ($(this).scrollTop() > 350) {
$('.upbtn').css({
bottom: 0
});
} else {
$('.upbtn').css({
bottom: '-80px'
});
}
});
$('.upbtn').on('click',function() {
$('html, body').animate({
scrollTop: 0
}, 500);
return false;
});</script>
<style>.upbtn {
z-index: 9999;
width: 100%;
height: 16px;
color: #FFF;
position: fixed;
bottom: -80px;
cursor: pointer;
background: #4e9c60;
transition: all .3s ease-in-out;
}
.upbtn:before {
content: "";
transition: all .3s ease-in-out;
z-index: 9999;
width: 100px;
height: 100px;
border: 14px solid #4e9c60;
position:relative;
bottom:10px;
left: 50%;
margin-left: -50px;
cursor: pointer;
display:block;
transform: rotate(45deg);
background: #FFF;
}
.upbtn:hover {
height: 20px;
}
.upbtn:hover:before {
bottom:12px;
}</style>
Отрегулируйте на каком расстоянии при прокрутке она будет появляться. В моём случае это значение 350
В двух местах замените цвет на желаемый. В примере #4e9c60
Готовый код устанавливайте в гаджет HTML/JavaScript , где нибудь в самом низу макета блога.
10 вариантов кнопки вверх для Блоггер
Оригинальная кнопка вверх/ вниз
Всем добра и до встречи. Не болейте, берегите себя и близких.
здесь можно оформить подписку на новые шпаргалки
Весьма симпатичная и современная примочка!
ОтветитьУдалитьСпасибо, Семён. Мне самой нравится.
УдалитьЗдорово, мне понравилось. Я код не посмотрела, а ширину самой линии можно сделать тоньше?
ОтветитьУдалитьНе поставила ударение, здОрово, а то прочла свой комментарий, выглядит, как будто это я так грубо поздоровалась.
ОтветитьУдалитьНаталья, я поняла Вас правильно, не переживайте. Значение ширины height: 16px;Но тут же надо поиграться с bottom:12px; и border: 14px. Пробуйте.
УдалитьПрикольная кнопочка, надо как-нибудь попробовать...)))
ОтветитьУдалитьЕлена, просто готовый код пробуйте, встал нормально экспериментируйте со стилями.
УдалитьСпасибо за разъяснения. Обязательно поставлю, очень удобная кнопка.
ОтветитьУдалитьЗдравствуйте, Вика! Попробовала поставить кнопку. Не отображается! Поясните, пожалуйста, что не так? А вот фиксированное меню очень удалось! Спасибо! https://toropej.blogspot.com/
ОтветитьУдалитьТатьяна, здравствуйте. Не знаю, почему. На трёх блогах тестировала. Я посмотрела код шаблона Вашего. Кнопка вверх-вниз которая стоит работает на тоже
Удалитьна джава скрипт. Видимо конфликт у них. Скорее всего.