регистрация
856материалов
3308комментариев
234темы на форуме
6958пользователей

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


Описание:

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

Плюсы:

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
Материал просмотрен: 5053 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 38 комментариев

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

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


d
Сергей @defaultNick 03.11.2015 14:181
+1
Скриптик... + иконку можно для скачки. Спасибо.
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/
Ромчик
Все работает
d
Сергей @defaultNick 05.11.2015 20:0914
0
nuriman2015 Все работает! СПС
Ромчик
Ссылки запрещены.
1 2 3 4 »
avatar
Партнерская программа uKitCPA
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 3
Гостей: 3
Пользователей: 0