Кнопка Вверх в виде ракеты на jQuery
Клёвый скрипт кнопочки вверх, который выполнен в виде ракеты. Всё выполнено очень круто!
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
#MrScrollUp div { width: 149px; overflow: hidden; position: absolute; left: 0; top: 0; margin: 0; padding: 0; } #MrScrollUp .MrScrollUp1 { background: url(/img/MrScrollUp.png) no-repeat -149px 0; opacity: 0; height: 250px; display: none; z-index: 1; } #MrScrollUp .MrScrollUp2 { background: transparent; cursor: pointer; display: block; z-index: 2; height: 150px; } #MrScrollUp { z-index: 11; width: 149px; height: 250px; display: block; overflow: hidden; cursor: default; position: fixed; right: 0; top: 95%; background: url(/img/MrScrollUp.png) no-repeat 0 0; margin: -125px 0 0; padding: 0; } |
2#: HTML Код кнопки. Вставлять на нужных страницах между body и /body:
1 2 3 4 5 |
<div id="MrScrollUp" style="display: none;"> <div class="MrScrollUp1"></div> <div class="MrScrollUp2"></div> </div> <script src="/js/MrScrollUp.js"></script> |
Осталось лишь залить JS файл из прикреплённого архива в папку js и две картинки в папку img
Ракета супер! 🙂