Зеленая кнопка вверх с крутым эффектом
827материалов
228тем на форуме
3004комментария
6159пользователей

Зеленая кнопка вверх с крутым эффектом


Описание:

Сегодня хочу поделиться одной темой, она довольно не новая, но актуальная "Как сделать кнопку наверх страницы на сайте".
Наверняка Вы видели такие кнопки на сайтах, кто-то даже поставил себе на сайт. Я видел различные реализации но все они мне не понравились по различным причинам. На днях наткнулся на один интересный и легкий скрипт реализующий создание кнопки, которая позволяет быстро и плавно перемещаться в верхнюю часть сайта одним нажатием, что очень удобно.

Плюсы:

1) Легкая кнопка
2) Волновой эффект
3) Плавно-анимированное прокручивание
4) CSS3 + JQuery

Установка кнопки:

Стили (CSS) кнопки:
Код
<style>.material-scrolltop {
       display: block;
       position: fixed;
       width: 0;
       height: 0;
       bottom: 23px;
       right: 23px;
       padding: 0;
       overflow: hidden;
       outline: none;
       border: none;
       border-radius: 2px;
       box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
       cursor: hand;
       border-radius: 50%;
       background: #4caf50;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       -webkit-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
       -ms-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
       -moz-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
       -o-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
       transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
}

.material-scrolltop:hover {
       background-color: #4caf50;
       text-decoration: none;
       box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 3px 15px rgba(0, 0, 0, 0.5);
}

.material-scrolltop::before {
       position: absolute;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
       content: "";
       width: 0;
       border-radius: 100%;
       background: #66bb6a;
}

.material-scrolltop:active::before {
       width: 120%;
       padding-top: 120%;
       -webkit-transition: all 0.2s ease-out;
       -ms-transition: all 0.2s ease-out;
       -moz-transition: all 0.2s ease-out;
       -o-transition: all 0.2s ease-out;
       transition: all 0.2s ease-out;
}

.material-scrolltop.reveal {
       width: 56px;
       height: 56px;
}

.material-scrolltop span {
       display: block;
       font-size: 25px;
       color: #fff;
}

.material-scrolltop,
.material-scrolltop::before {
       background-image: url(http://webmaster-ucoz.ru/ucoz/1/vverkh/top-arrow.svg);
       background-position: center 50%;
       background-repeat: no-repeat;
}</style>

В нижнюю часть сайта вставляем код:
Код
<script src="http://webmaster-ucoz.ru/ucoz/1/vverkh/material-scrolltop.js"></script>
       <button class="material-scrolltop" type="button"></button>
       <script>
       $(document).ready(function() {
       $('body').materialScrollTop({
       revealElement: 'header',
       revealPosition: 'bottom',
       onScrollEnd: function() {
       console.log('Scrolling End');
       }
       });
       });
       </script>

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

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

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

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


avatar
Сергей @defaultNick 03.11.2015 14:181
+1
like Скриптик... + иконку можно для скачки. Спасибо.
TwIxXx
Скрипт то работает но у меня нет зеленой кнопки этой!!
TwIxXx
Извиняюсь конечно но файл не скачивается!
TwIxXx
У меня проблема теперь в другом! У меня теперь эта стрелочка в квадратной рамке находится!
Ромчик
Дайте ссылку на сайт, посмотрю
TwIxXx
http://hostinger.do.am/
Ромчик
Зайдите в свой CSS и у кода кнопки удалите
Код
<style>

Код
</style>
TwIxXx
Спасибо за помощь, все работает!!!
Ромчик
Не за что! Я Вам рекомендую убрать это скрипт http://f5.s.qip.ru/19yBhtb7n.png он вообще не вписывается Ваш дизайн сайт
TwIxXx
Хорошо! Просто я новенький в этом, в этом я не очень разбираюсь!
nuriman2015
Анатолий @nuriman2015 04.11.2015 16:2313
0
не работает http://sportnuriman.ucoz.ru/
Ромчик
Все работает
avatar
Сергей @defaultNick 05.11.2015 20:0914
0
nuriman2015 Все работает! СПС
Ромчик
Ссылки запрещены.
1 2 3 4 »
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта