Scroll Progress a bookmark ve stránce

by Petr Haluza

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<div class="progress-bar"></div>
<a id="bookmark">Záložka</a>
<div class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at tellus vitae elit sodales pulvinar. Donec ut commodo nisi. Aenean euismod, turpis at vestibulum malesuada, nisi massa auctor sem, vitae porta turpis nisi eget lacus. Donec erat mauris, gravida
  ac luctus in, pulvinar at magna. Ut sodales magna ut risus tincidunt porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis rutrum ligula auctor, ornare justo nec, vestibulum arcu. Maecenas ultrices purus
  eget risus gravida, nec auctor velit feugiat. Maecenas tincidunt sit amet elit laoreet placerat. Aenean efficitur pharetra finibus. Phasellus hendrerit egestas metus, sollicitudin sollicitudin neque commodo at. Class aptent taciti sociosqu ad litora
  torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque quis felis ut ligula gravida vestibulum. Nullam auctor nibh est, quis faucibus ex congue eu. Aenean faucibus enim luctus lectus
  ultricies condimentum. Duis quis ante dui. Cras id quam semper nulla malesuada venenatis ut porta diam. Aliquam ultricies eros enim. Duis consequat, tortor a laoreet iaculis, purus diam sollicitudin tortor, aliquam facilisis lorem massa ut elit. Mauris
  convallis vel dolor vitae cursus. Nam lacinia sodales ex at rutrum. In finibus neque eget tortor fermentum, ac imperdiet diam scelerisque. Vivamus sit amet fermentum lacus, non ultricies urna. Aenean vel nibh vel quam varius aliquet. Sed ac luctus quam,
  ac dictum diam. Proin dignissim, leo facilisis aliquam viverra, ligula dui pharetra nibh, vitae ornare elit eros nec odio. In condimentum, mi ac euismod maximus, nibh est malesuada elit, quis tempus dolor magna iaculis odio. Suspendisse vehicula et
  metus ac commodo. Aenean gravida arcu vel odio ornare,...

CSS

.progress-bar {
  height: 30px;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0px;
}

#bookmark {
  position: fixed;
  top: 60px;
  left: 10px;
  cursor: pointer;
  padding: 20px;
  background-color: #000;
  color: #dd3;
}

.caret {
  position: fixed;
  color: #000;
  text-align: center;
  background: #fff;
  border: 5px solid #fff;
  top: 15px;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  cursor: pointer;
}

.text {
  padding: 60px 25px 25px 130px;
  background: #dd3;
  margin: 0px;
}

JavaScript

var w = $(window);
    var prog = $('.progress-bar');
    var wh, h, sHeight;


    function setSizes() {
      wh = w.height();
      h = $('.text').height();
      sHeight = h - wh;
    }

    setSizes();

    w.on('scroll', function() {
      var perc = Math.max(0, Math.min(1, w.scrollTop() / sHeight));
      updateProgress(perc);
    })

    .on('resize', function() {
      setSizes();
      w.trigger('scroll');
    });

    function updateProgress(perc) {
      prog.css({ width: perc * 100 + '%'});
    }



    $('#bookmark').on("click", function() {
      var add = "";
      var ww = $(window).width();
      pw = prog.width() - 3;
      l = pw / ww * 100;
      add = "<div class=\"caret\" style=\"left:";
      add += l;
      add += "%;\" data-title=\"";
      add += l;
      add += "\">&#8681;</div>";
      $('.progress-bar').append(add);
    });



    // SCROLL TO FUNCTION
    $('body').on('click', '.caret', function() {
      var scrollPerc = $(this).data('title') / 100;
      var dh = $(document).height();
      var scrollAmount = Math.floor(dh * scrollPerc);
      $('html,body').animate({
        scrollTop: scrollAmount
      }, 600);
    });