Кнопка вверх для сайта

Кнопка вверх актуальна для одностраничных сайтов, так как они имеют длинное тело. А также при просмотре сайтов, с большим количеством материала с мобильных устройств. Для добавления кнопки на сайт необходимо в верстку добавить элемент с id=»scrollup».  При наведении на этот элемент он будет осветляться. Показываться кнопка будет только при прокрутке страницы, заданной в теле скрипта(сейчас стоит смещение 550 пикселей). Если нужно, чтобы кнопка показывалась всегда, то надо ставить 0 пикселей.  При нажатии на кнопку страница будет прокручена до самого начала вверх.

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';
        }
    };
};

 

РубрикиJS

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *