регистрация
856материалов
3263комментария
230тем на форуме
6747пользователей

Кнопка вверх для сайта


На любом сайте, где достаточно много контента, нужна быстрая прокрутка, иначе попросту неудобно мотать до самого верха колесиком мышки или пользоваться боковым скроллом. Для этих целей существуют кнопки "вверх". При прокрутке страницы вниз кнопка сама плавно появляется в правом нижнем углу. Поле нажатия на кнопку страница плавно перелистывается вверх.

Приступим к установке:

Для начала в нижнюю часть сайта вставим этот JS код

Код
Код
// кнопка вверх  
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});  
$(function() {  
$(".top_up").scrollToTop();  
});

Теперь пропишем стили CSS

Код
Код
/* стили кнопки вверх -----*/  
.top_up { color:#F2F2F2; text-shadow:0 1px 1px #101010; cursor: pointer; position:fixed; bottom:-3px; right:50px; background:#7B7B7B; margin: 0px; padding:5px 10px 7px 10px; border:1px solid #525252; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px }  
.top_up:hover{ color:#F2F2F2; background:#868686 }

И на последок установим HTML код сразу после тега

Код
Код
<a href="#" class="top_up">Вверх ▲</a>

Демо прикреплять нет никакого смысла, так как на нашем сайте (uc-portaller.ru) установлена именно такая кнопка. На этом все! Оставляйте комментарии и не забывайте следить за обновлениями.


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 28.08.2013 в 11:58
Материал просмотрен: 874 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
uLike – кнопка «Мне нравится»
Создать сайт вместе с uKit.com
Статистики нашего сайта
Сегодня к нам присоединился: 1 человек
Пользователи и гости сейчас онлайн: 2 Сегодня наш портал посетили: чел
Сейчас на сайте: dimanbeliy
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 2
Гостей: 1
Пользователей: 1