регистрация

Простая реализация кнопки “наверх” для 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
Материал просмотрен: 1520 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 2 комментария

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

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


Власть
Супер все работает, ставил себе норм.
Oleg_Sinicin
Как всегда супер. Спасибо тебе за скрипты
avatar
Управляй сайтом с android
Создать сайт вместе с uKit.com
Статистики нашего сайта
Сегодня к нам присоединились: 5 человек
Пользователи и гости сейчас онлайн: 6 Сегодня наш портал посетили: чел
Сейчас на сайте: BlackHARD