06.10.2016

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

Нажмите на изображение для просмотра в полном размере
Простая кнопка “наверх” для 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 class="cd-top" href="#0">верх</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;
Понравилось:
Категория: Скрипты для uCoz Просмотров: 1586 Комментариев: 0
К материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]