Простая реализация кнопки “наверх” для uCoz
827материалов
228тем на форуме
3003комментария
6152пользователя

Простая реализация кнопки “наверх” для uCoz


Описание:

Чем проще навигация на вашем сайте, тем удобнее им пользоваться. Сегодня все чаще в рунете можно встретить кнопку “подняться вверх”. Она обычно появляется в нижнем углу сайта при скролле и прячется, если страница прокручивается вверх.

Я думаю, что не стоит показывать, как она выглядит на сайтах, так как почти на каждом ресурсе она есть. Это простая кнопка со стрелкой вверх или со словом, при нажатии на которую вы быстро перемещаетесь в самую верхнюю область сайта.

Данная функция - это некий элемент, который в определенных случаях улучшает юзабилити сайта.

Установка:

В таблицу стилей вставляете код:
Код
.cd-top {
   display: inline-block;
   height: 40px;
   width: 40px;
   position: fixed;
   bottom: 40px;
   right: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
   background: rgba(232, 98, 86, 0.8) url(http://webmaster-ucoz.ru/ucoz/1/svg/cd-top-arrow.svg) no-repeat center 50%;
   visibility: hidden;
   opacity: 0;
   -webkit-transition: opacity .3s 0s, visibility 0s .3s;
   -moz-transition: opacity .3s 0s, visibility 0s .3s;
   transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
   -webkit-transition: opacity .3s 0s, visibility 0s 0s;
   -moz-transition: opacity .3s 0s, visibility 0s 0s;
   transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
   visibility: visible;
   opacity: 1;
}
.cd-top.cd-fade-out {
   opacity: .5;
}
.no-touch .cd-top:hover {
   background-color: #e86256;
   opacity: 1;
}
@media only screen and (min-width: 768px) {
   .cd-top {
   right: 20px;
   bottom: 20px;
   }
}
@media only screen and (min-width: 1024px) {
   .cd-top {
   height: 60px;
   width: 60px;
   right: 30px;
   bottom: 30px;
   }
}

В нижнюю часть сайта вставляете код:
Код
<a href="#0" class="cd-top">верх</a>
<script>
jQuery(document).ready(function($){
var offset = 300,
offset_opacity = 1200,
scroll_top_duration = 700,
$back_to_top = $('.cd-top');
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollTop() > offset_opacity ) {   
$back_to_top.addClass('cd-fade-out');
}
});
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
});
</script>

Обработка событий:

Для задуманного функционала нам понадобится три переменные:
Код
//количество пикселей после прокрутки которой появится кнопка "Наверх"
var offset = 300,
//количество пикселей после прокрутки которой степень прозрачности будет увеличена
offset_opacity = 1200,
//время за которое будет осуществлена прокрутка (в милисекундах)
scroll_top_duration = 700;

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 22.09.2016 в 19:00
Материал просмотрен: 984 раза
Категория материала: Скрипты для uCoz
К материалу оставлены: 2 комментария

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

2 комментария


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