Кнопка наверх

Пример простой кнопки наверх при скроллинге страниц.

.scroll-up { 
    text-align: center;
    display: inline-block;
    padding: 7px 10px;
    font-size: 14px;
    line-height: 17px;
    background-color: rgba(0,0,0,.5);
    color: #fff;
    border-radius: 3px;
    bottom: 30px;
    transition: bottom 2s;
    position: fixed;
    right: 30px;
    bottom: -500px;
    cursor: pointer;
    z-index: 10;
}

.scroll-up.active {
    bottom: 30px;
}

.scroll-up::before {
    content: '';
    border: 8px solid transparent;
    border-bottom: 10px solid #b7b7b7;
    display: block;
    width: 0px;
    margin: 4px auto;
    margin-top: -6px;
}

<span class="scroll-up">Наверх</span> 

// Нажатие на кнопку прокрутки вверх
$(document).on('click', '.scroll-up', function() {
    $('html, body').animate({ scrollTop: 0 }, 500, 'swing');
    return false;
});

// Функция обработки прокрутки страницы
$(document).scroll(function(event) {
    var windowHeight = $(window).height(),
        documentScrollTop = $(document).scrollTop(), // Текущая позиция прокрутки
        documentHeight = $(document).height();       // Полная высота страницы

    // Расстояние от нижней части окна до конца страницы
    var distanceToBottom = documentHeight - (documentScrollTop + windowHeight);

    // Показывать кнопку, если прокручено больше 500 пикселей от начала страницы
    // и расстояние до нижнего края страницы больше 100 пикселей
    if ((documentScrollTop > 500) && (distanceToBottom > 100)) {
        $('.scroll-up').addClass('active');
    } else {
        $('.scroll-up').removeClass('active');
    }
});