Описание Полезный скрипт позволяющий пользователям быстро оказывается в самой начале страницы всего в один клик. Установка В таблицу стилей вставляете код: Код
.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
|