CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ilovebali
ilovebali

Reputation: 543

Need help to get the last page from scrollTop with jquery

I just learn about javascript and need A little bit help to get the last page element from jquery scrollTop.

So here my code :

$(window).scroll(function() {
    $("ul.pages li").each(function(i,e){
                    var offset = $(e).offset();
        if($(window).scrollTop() >= offset.top){
            $(".right_footer").text($(e).attr("data-id"));
        }   
    })
});

In html code 

<ul class="pages">
   <li class="section" data-id="page_1"></li>
   <li class="section" data-id="page_2"></li>
   <li class="section" data-id="page_3"></li>
   <li class="section" data-id="page_4"></li>
</ul>

Well, when I scrolling the page I got all the value from data-id ( page_1,page_2,page_3,NAN ), but I can not get the last value from data-id="page_4", javascript said NAN.

Can anybody help me??

Thanks All!

Upvotes: 1

Views: 153

Answers (2)

Austin Mullins
Austin Mullins

Reputation: 7427

It turns out there was nothing wrong with your code, it's just that you weren't able to see the result on the last list item because it wasn't tall enough to scroll off the page. With the addition of real content, this problem will go away. In the meantime, you can simulate large blocks of content by specifying the height of your li elements in the page's CSS as demonstrated below:

ul.pages{
  float:left;
  width:1024px;
  height:auto;
}

li.page{
  width:1024px;
  height:700px; /* <-- Make this huge in the absence of content */
  display:block;
}

Upvotes: 1

Shibu Thomas
Shibu Thomas

Reputation: 3196

This jquery help to force your browser to go to the top of your page: 

$(".yourElementClass").click(function(){
 $(".yourDivName").animate({ scrollTop: 0 }, ’slow’);
 });

Upvotes: 0

Related Questions