Show scroll to top with jQuery

index.html

<div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet felis vitae arcu pharetra rhoncus. In pharetra sagittis est quis sagittis. Aenean quis pulvinar risus. Nam libero est, elementum vitae blandit sollicitudin, sollicitudin quis lacus. Donec congue ligula urna, a dapibus mauris volutpat sed. Integer id vehicula tellus. Maecenas fermentum eros ut risus sagittis, id elementum nibh rhoncus. Vestibulum nec velit ac est imperdiet lacinia ut ut nisi. Sed sit amet nibh a leo iaculis ornare. Aliquam vulputate ornare sapien vel rhoncus. Quisque faucibus sodales elit in efficitur. Quisque mattis porta magna a vehicula. Proin in finibus leo. Cras imperdiet, mauris et iaculis tristique, ante neque ultricies erat, sed facilisis ligula erat eget augue.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet felis vitae arcu pharetra rhoncus. In pharetra sagittis est quis sagittis. Aenean quis pulvinar risus. Nam libero est, elementum vitae blandit sollicitudin, sollicitudin quis lacus. Donec congue ligula urna, a dapibus mauris volutpat sed. Integer id vehicula tellus. Maecenas fermentum eros ut risus sagittis, id elementum nibh rhoncus. Vestibulum nec velit ac est imperdiet lacinia ut ut nisi. Sed sit amet nibh a leo iaculis ornare. Aliquam vulputate ornare sapien vel rhoncus. Quisque faucibus sodales elit in efficitur. Quisque mattis porta magna a vehicula. Proin in finibus leo. Cras imperdiet, mauris et iaculis tristique, ante neque ultricies erat, sed facilisis ligula erat eget augue.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet felis vitae arcu pharetra rhoncus. In pharetra sagittis est quis sagittis. Aenean quis pulvinar risus. Nam libero est, elementum vitae blandit sollicitudin, sollicitudin quis lacus. Donec congue ligula urna, a dapibus mauris volutpat sed. Integer id vehicula tellus. Maecenas fermentum eros ut risus sagittis, id elementum nibh rhoncus. Vestibulum nec velit ac est imperdiet lacinia ut ut nisi. Sed sit amet nibh a leo iaculis ornare. Aliquam vulputate ornare sapien vel rhoncus. Quisque faucibus sodales elit in efficitur. Quisque mattis porta magna a vehicula. Proin in finibus leo. Cras imperdiet, mauris et iaculis tristique, ante neque ultricies erat, sed facilisis ligula erat eget augue.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet felis vitae arcu pharetra rhoncus. In pharetra sagittis est quis sagittis. Aenean quis pulvinar risus. Nam libero est, elementum vitae blandit sollicitudin, sollicitudin quis lacus. Donec congue ligula urna, a dapibus mauris volutpat sed. Integer id vehicula tellus. Maecenas fermentum eros ut risus sagittis, id elementum nibh rhoncus. Vestibulum nec velit ac est imperdiet lacinia ut ut nisi. Sed sit amet nibh a leo iaculis ornare. Aliquam vulputate ornare sapien vel rhoncus. Quisque faucibus sodales elit in efficitur. Quisque mattis porta magna a vehicula. Proin in finibus leo. Cras imperdiet, mauris et iaculis tristique, ante neque ultricies erat, sed facilisis ligula erat eget augue.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet felis vitae arcu pharetra rhoncus. In pharetra sagittis est quis sagittis. Aenean quis pulvinar risus. Nam libero est, elementum vitae blandit sollicitudin, sollicitudin quis lacus. Donec congue ligula urna, a dapibus mauris volutpat sed. Integer id vehicula tellus. Maecenas fermentum eros ut risus sagittis, id elementum nibh rhoncus. Vestibulum nec velit ac est imperdiet lacinia ut ut nisi. Sed sit amet nibh a leo iaculis ornare. Aliquam vulputate ornare sapien vel rhoncus. Quisque faucibus sodales elit in efficitur. Quisque mattis porta magna a vehicula. Proin in finibus leo. Cras imperdiet, mauris et iaculis tristique, ante neque ultricies erat, sed facilisis ligula erat eget augue.</p>
    <p>Mauris id semper mauris. Duis eu sapien ipsum. Etiam vestibulum quam turpis, non rutrum nunc fringilla a. Integer porta id est a consequat. Vivamus suscipit ligula non metus consectetur sagittis. Praesent nec est at metus dignissim aliquet sed et augue. Integer consequat, dolor vitae euismod gravida, nunc orci vehicula ligula, vel volutpat velit est sed est. Nam at nisl rutrum, tincidunt nisi non, imperdiet odio. Nulla dignissim leo nunc, eu ultricies turpis iaculis nec. Nam bibendum malesuada nisi, eget blandit dolor bibendum sed. Nunc lacus arcu, convallis eu lectus eget, laoreet fringilla lorem. Vivamus posuere lacinia neque, at aliquet ex lacinia at. Donec iaculis, nulla sit amet commodo congue, tortor nulla euismod augue, quis viverra enim tellus efficitur elit.</p>
    <p>Sed sit amet ipsum dapibus, dignissim urna sed, venenatis sapien. Fusce sollicitudin felis ut nibh cursus viverra. Integer convallis congue lectus ut semper. Mauris egestas sagittis sapien. Mauris eget ex eget magna eleifend consectetur. Praesent at purus eget nulla suscipit lacinia. Nunc at est ultrices, ultricies ante et, ullamcorper orci. Suspendisse ac ex sagittis, consequat ex imperdiet, porta lectus. Integer nec porttitor justo. Ut lacinia quis massa et dictum. Integer eget leo risus.</p>
    <p>Sed cursus hendrerit ante a congue. In vulputate dui lobortis ullamcorper bibendum. In odio orci, imperdiet eget eros non, convallis fermentum odio. Nunc viverra accumsan diam, eu vulputate nisi mollis quis. Phasellus congue metus eget fermentum efficitur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis congue mi nec nibh pulvinar ultrices. Donec pulvinar ut orci nec feugiat. Aenean varius tellus ac purus bibendum fermentum in nec arcu.</p>
    <p>Etiam vel mi enim. Cras pulvinar nisi a sagittis consequat. Ut ex massa, gravida eget pharetra eu, pharetra id nunc. Aliquam dignissim eros at purus feugiat feugiat. Donec porta aliquet diam quis maximus. Nunc feugiat erat dui, vel volutpat libero tristique ut. Mauris in scelerisque massa. Morbi faucibus metus id lorem finibus, et bibendum purus congue. Aenean elementum vitae magna eu posuere. Proin dignissim ornare turpis, eu gravida quam dapibus eget. Curabitur at euismod urna.</p>
    <p>Sed cursus hendrerit ante a congue. In vulputate dui lobortis ullamcorper bibendum. In odio orci, imperdiet eget eros non, convallis fermentum odio. Nunc viverra accumsan diam, eu vulputate nisi mollis quis. Phasellus congue metus eget fermentum efficitur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis congue mi nec nibh pulvinar ultrices. Donec pulvinar ut orci nec feugiat. Aenean varius tellus ac purus bibendum fermentum in nec arcu.</p>
    <p>Etiam vel mi enim. Cras pulvinar nisi a sagittis consequat. Ut ex massa, gravida eget pharetra eu, pharetra id nunc. Aliquam dignissim eros at purus feugiat feugiat. Donec porta aliquet diam quis maximus. Nunc feugiat erat dui, vel volutpat libero tristique ut. Mauris in scelerisque massa. Morbi faucibus metus id lorem finibus, et bibendum purus congue. Aenean elementum vitae magna eu posuere. Proin dignissim ornare turpis, eu gravida quam dapibus eget. Curabitur at euismod urna.</p>
    <p>Sed cursus hendrerit ante a congue. In vulputate dui lobortis ullamcorper bibendum. In odio orci, imperdiet eget eros non, convallis fermentum odio. Nunc viverra accumsan diam, eu vulputate nisi mollis quis. Phasellus congue metus eget fermentum efficitur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis congue mi nec nibh pulvinar ultrices. Donec pulvinar ut orci nec feugiat. Aenean varius tellus ac purus bibendum fermentum in nec arcu.</p>
    <p>Etiam vel mi enim. Cras pulvinar nisi a sagittis consequat. Ut ex massa, gravida eget pharetra eu, pharetra id nunc. Aliquam dignissim eros at purus feugiat feugiat. Donec porta aliquet diam quis maximus. Nunc feugiat erat dui, vel volutpat libero tristique ut. Mauris in scelerisque massa. Morbi faucibus metus id lorem finibus, et bibendum purus congue. Aenean elementum vitae magna eu posuere. Proin dignissim ornare turpis, eu gravida quam dapibus eget. Curabitur at euismod urna.</p>
    <div id="totop">hi!</div>
</div>

script.js

$(document).scroll(function () {
    
    var wh = $(window).height();
    var y = $(this).scrollTop();
    console.log('browser viewport is ' + wh);
    console.log('vertical scroll bar position is ' + y);
    if (y > wh) {   
        $('#totop').fadeIn();
        console.log('Here I am baby!');
    } else {
        $('#totop').fadeOut();
    }
   
});

Show scroll to top with jQuery.markdown

Show scroll to top with jQuery ('-' * 30)

A Pen by Elvis on CodePen.

License.

style.css

body {
    padding: 1em;
    font-family: Arial;
    font-size: 13px;
}
.container {
    max-width: 600px;
    margin: 0 auto;
}
#totop {
    display: none;
    position: fixed;
    top: 100px;
    right: 10px;
    width: 50px;
    height: 50px;
    background: black;
    color: #fff;
}