Кнопка вверх для сайта
827материалов
228тем на форуме
3004комментария
6159пользователей

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


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

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

Для начала в нижнюю часть сайта вставим этот 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
Материал просмотрен: 715 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

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

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


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта