find percentage of page height jquery

Question

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?

http://jsfiddle.net/8hpaLek6/2/ From there: http://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript — A. Wolff, Jun 04 '15 at 17:31
@A.Wolff, put that in an answer, it's the only one that works. :) :) :) :) — yaakov, Jun 04 '15 at 17:33

score 6 · Answer 1 · edited May 23 '17 at 12:01

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-

(d - c) was critical ... ":) – AmmarCSE Jun 04 '15 at 17:37 — AmmarCSE, Jun 04 '15 at 17:37

ArtBIT · Accepted Answer · 2015-06-11T19:59:05.257

3

$(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>

edited Jun 11 '15 at 19:59

answered Jun 11 '15 at 11:03

ArtBIT

3,931
28
39

this doesn't answer the addition – yaakov Jun 11 '15 at 16:36
@yak613 how about now? – ArtBIT Jun 11 '15 at 18:25
yes, this works, but is there a way to make it stay as "you have reached the bottom of the page", instead of reverting to a percentage when the user scrolls back up? – yaakov Jun 11 '15 at 18:55
@yak613 So, once the user reaches the bottom of the page, and scrolls back up, the message should still be "you have reached the bottom of the page"? Try it now. – ArtBIT Jun 11 '15 at 20:00

score 0 · Answer 3 · answered Jun 04 '15 at 17:28

0

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

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

answered Jun 04 '15 at 17:28

Zee

8,420
5
36
58

score 0 · Answer 4 · answered Jun 04 '15 at 17:33

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/

find percentage of page height jquery

4 Answers4

-DEMO-