Кнопка вверх актуальна для одностраничных сайтов, так как они имеют длинное тело. А также при просмотре сайтов, с большим количеством материала с мобильных устройств. Для добавления кнопки на сайт необходимо в верстку добавить элемент с id=»scrollup». При наведении на этот элемент он будет осветляться. Показываться кнопка будет только при прокрутке страницы, заданной в теле скрипта(сейчас стоит смещение 550 пикселей). Если нужно, чтобы кнопка показывалась всегда, то надо ставить 0 пикселей. При нажатии на кнопку страница будет прокручена до самого начала вверх.
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 |
window.onload = function() { // после загрузки страницы var scrollUp = document.getElementById('scrollup'); // найти элемент scrollUp.onmouseover = function() { // добавить прозрачность scrollUp.style.opacity=0.3; scrollUp.style.filter = 'alpha(opacity=30)'; }; scrollUp.onmouseout = function() { //убрать прозрачность scrollUp.style.opacity = 0.5; scrollUp.style.filter = 'alpha(opacity=50)'; }; scrollUp.onclick = function() { //обработка клика window.scrollTo(0,0); }; // show button window.onscroll = function () { // при скролле показывать и прятать блок if ( window.pageYOffset > 550 ) { scrollUp.style.display = 'block'; } else { scrollUp.style.display = 'none'; } }; }; |