Копка «Подняться вверх» для сайта
Реализация простой и в то же время удобной для сайта кнопки «Подняться вверх».
Как реализовать:
1. javascript самой кнопки: для этого создаем текстовый документ, и помещаем в него следующий код
|
1 2 3 4 5 6 7 8 9 10 11 |
var gotop_scroll_start = 200; function gotop_scroll(){ if($(window).scrollTop()<gotop_scroll_start) $('.gototop').fadeOut(400); else $('.gototop').fadeIn(300); } $(function(){ $('body').append('<div class="gototop" title="Наверх ↑"></div>'); if($(window).scrollTop()>gotop_scroll_start) $('.gototop').show(); $(window).scroll(gotop_scroll); $(".gototop").click(function(){$('html,body').animate({scrollTop:0})}); }) |
И сохраняем наш документ под названием, к примеру: gotop.js
2. Добавим стили CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.gototop{ display: none; cursor: pointer; position: fixed; left: 0; top: 0; width: 3%; max-width: 60px; min-width: 10px; height: 100%; background: url('../images/uarr.png') no-repeat 50% 12px; transition: background-color .2s ease-in; z-index: 99; } .gototop:hover{ background-color: rgba(240,240,240,.5)!important } |
Так же не забываем загрузить иконку стрелочки:
3. Остаётся только подключить нашу кнопку (Внизу страницы перед тегом /body)
|
1 |
<script type="text/javascript" src="/js/gotop.js"></script> |
