CODEWITHSUNDEEP
javascriptjqueryhtml
yaakov
yaakov

Reputation: 4655

find percentage of page height jquery

I am trying to write code to a div telling a user how far he has scrolled down the page. Here is my code:

$(document).scroll(function(){

var fullHeight = $(this).height();

var currentHeight = $(this).scrollTop();

var percentageOfPage = currentHeight/fullHeight;

percentageOfPage = percentageOfPage.toFixed(2);

var t = $("#t");
t.html("You are " + percentageOfPage + " down this page." );


});

fiddle
The code works mostly how it should: it writes out the percentage how far a user has scrolled. But it stops at about .67 or .69. Why does it do that? I want it to go all the way to 1. Also, how can I display it as a percentage, like 60%, instead of a decimal, like .6? here is where the page is.

ADDITION:
How can I make it so that at the when the user reaches the bottom of the page, the message becomes: "You have reached the bottom of the page", instead of the percentage?

Upvotes: 3

Views: 1010

Answers (4)

A. Wolff
A. Wolff

Reputation: 74420

You should bind scroll event to window object, and then use following logic: (found there)

  $(window).scroll(function() {
    var s = $(this).scrollTop(),
      d = $(document).height(),
      c = $(this).height();
    scrollPercent = ((s / (d - c)) * 100).toFixed(2);

    console.log("Current scroll percent: " + scrollPercent);

    var t = $("#t");
    t.html(scrollPercent != 100 ? "You are " + scrollPercent + "% down this page." : "You have reached the bottom of the page");

  }) /*.scroll() to trigger event on load*/ ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="t" style="position:fixed; top:0px;"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

-DEMO-

Upvotes: 6

ArtBIT
ArtBIT

Reputation: 3989

$(document).on('scroll.percentage', function() {
  var scrollPercent = Math.round(100 * $(window).scrollTop() / ($(document).height() - $(window).height()));
  // if the user has reached the bottom of the page
  // unbind the scroll listener
  if (scrollPercent == 100) {
    $("#t").html("You have reached the bottom of the page.");
    $(this).off('scroll.percentage');
    return;
  }
  $("#t").html("You are " + scrollPercent + "% down this page.");
});
html,
body {
  height: 1000px;
}
#t {
  position: fixed;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="t"></div>

Upvotes: 3

xvf
xvf

Reputation: 350

Since you will always calculate from the top or bottom of the viewport, there will be a percentage to start or end.

This should work

var scrollPercent = 100 * $(window).scrollTop()/($(document).height() - $(window).height());

Demo - https://jsfiddle.net/yak613/8hpaLek6/

Upvotes: 0

Zee
Zee

Reputation: 8488

Also, how can I display it as a percentage, like 60%

var percentageOfPage = currentHeight/fullHeight*100;
...
t.html("You are " + percentageOfPage + "% down this page." );

Upvotes: 0

Related Questions