Кнопка автоматической прокрутки страницы блога вверх (скроллинг), присутствует на многих блогах и их большое множество по внешнему виду, по исполнению и т.д. Выбор огромен, но главное это их полезность в плане удобства работы с web-страницей.
Я опробировала достаточно много различных вариантов и один из понравившихся, ниже представлен.
Вариант - плавное перемещение вверх страницы
Цвет фона, картинка, текст, расположение кнопки-мои, подбиралось под общую цветовую гамму блога.
Вами может быть все настроено под свой блог и ваш вкус.
Код
<style>.b-top {z-index:2600;position:fixed;left:0;bottom:20px;width:40%;margin-left:50%;opacity: 0.9;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px;
color:white;background:#800202 url(http://site.yandex.ru/static/css/blocks/b-j-top/b-j-top.png) no-repeat 50% 11px;border-radius:7px;}</style><script type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 1000) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script><div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px;
color:white;background:#800202 url(http://site.yandex.ru/static/css/blocks/b-j-top/b-j-top.png) no-repeat 50% 11px;border-radius:7px;}</style><script type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 1000) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script><div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>
1) Заходим в Панель управления -> Дизайн
2) Нажимаем добавить гаджет, выбираем "HTML/JavaScript
3) В поле "Содержание" вставляем код -> "Сохранить"
4) Место расположения гаджета, естественно выбирали в самом низу (по Вашему усмотрению-слева, в центре, справа)
Настройки CSS
z-index- отображение относительно других элементов
position - позиционирование кнопки
bottom - положение снизу
right - положение справа
background - фон
opacity - прозрачность
color -цвет текста
padding - внутренние отступы
margin - внешние отступы
http://site.yandex.ru/static/css/blocks/b-j-top/b-j-top.png -адрес картинки
border-radius - радиус бордюра
Играясь с настройками, все делаете "под себя".z-index- отображение относительно других элементов
position - позиционирование кнопки
bottom - положение снизу
right - положение справа
background - фон
opacity - прозрачность
color -цвет текста
padding - внутренние отступы
margin - внешние отступы
http://site.yandex.ru/static/css/blocks/b-j-top/b-j-top.png -адрес картинки
border-radius - радиус бордюра
Просмотр в действии данного варианта кнопки-на любой странице внизу справа этого блога
Комментариев нет:
Отправить комментарий