регистрация
856материалов
3264комментария
230тем на форуме
6752пользователя

Скрипт “подняться вверх” на CSS3 и jQuery


Описание:

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

Т.е. у Вас есть длинная статья, которую человек долго прокручивал вниз, наконец-то он ее дочитал и теперь ему хочется подняться наверх страницы, и тут он видит небольшую стрелочку, нажав на которую, он быстро и плавно поднимается вверх страницы и ему не надо крутить колесико на мышке или пользоваться скролом.

Данная кнопка появляется только тогда, когда человек прокрутил страницу немного вниз.

Установка:

В таблицу стилей вставляем код:
Код
.cd-top {
background-color: rgb(51, 122, 183);
bottom: 0px;
color: rgb(255, 255, 255);
display: inline-block;
font-size: 18px;
line-height: 24px;
position: fixed;
opacity: 0;
right: 0px;
text-align: center;
text-decoration: none;
-webkit-transform: scale(5) translate(47px,-10px);
-moz-transform: scale(5) translate(47px,-10px);
-o-transform: scale(5) translate(47px,-10px);
-ms-transform: scale(5) translate(47px,-10px);
transform: scale(5) translate(47px,-10px);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
visibility: hidden;
white-space: nowrap;
width: 100%;
}
.cd-top.cd-is-visible, .no-touch .cd-top:hover {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.cd-top.cd-is-visible {
opacity: 0.9;
-webkit-transform: scale(1) translate(0px,0px);
-moz-transform: scale(1) translate(0px,0px);
-o-transform: scale(1) translate(0px,0px);
-ms-transform:scale(1) translate(0px,0px);
transform: scale(1) translate(0px,0px);
visibility: visible;
}
.cd-top.cd-is-visible:hover {
color: rgb(255, 255, 255);
opacity: 1;
}
.cd-top:hover {         
text-decoration: none;
}
.cd-top .fa {
padding: 25px 25px;
}
.cd-top span:last-child {
padding: 25px 8px;
}
@media (min-width: 768px) {
.cd-top {bottom: 90px;
width: auto;
right: -158px;
}
.cd-top:hover {
right: 0px;
}
.cd-top .fa {
border-right: 1px solid rgb(71, 142, 203);
}
}

А этот код в нижнюю часть сайта:
Код
<a href="#0" class="back-to-top cd-top"><span class="fa fa-chevron-up"></span> <span>Поднятся на верх</span></a><script>
$(window).scroll(function() {
         ($(this).scrollTop() > ($('header').height() + 200)) ? $('.back-to-top').addClass('cd-is-visible') : $('.back-to-top').removeClass('cd-is-visible cd-fade-out');
         }).trigger('scroll');
         $(window).resize(function() {
         var right = (($(window).width() - $('section').width())/2)+95;
         if ($('nav.sidebar').hasClass('affix')) {
         $('nav.sidebar').css('right', right+'px');
         }
         }).trigger('resize');
         $('.back-to-top').on('click', function(event) {
         event.preventDefault();
         $('html,body').animate({
         scrollTop: 0
         }, 700);
         });
</script>


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

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

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


darkelow
3c956ff @darkelow 15.01.2017 00:361
+1
А я уже подумал что мой самый любимый сайт о uCoz забросили) скажите что я не прав :-)
Amat_serkal
Amat Serkal @Amat_serkal 15.01.2017 05:202
-1
Permission to share
Snoopak
Anatoliy Kolesnik @Snoopak 17.01.2017 15:063
0
На демо нету кнопку
Skandar
Александр @Skandar 18.01.2017 12:414
0
Чтобы кнопка появилась, прокрутите вниз страницы.
Ghettoblaster
Andrey Milevskiy @Ghettoblaster 24.01.2017 22:476
+1
Спасибо! Взял себе
a
Неполучается! Код в css надо в самый низ вставлять?
1 2 »
avatar
Хотите сайт всего за 10 дней?
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 3
Гостей: 3
Пользователей: 0