CODEWITHSUNDEEP
javascriptjqueryscroll
user971741
user971741

Reputation:

How to detect scroll position of page using jQuery

I am having trouble with jQuery functionality on my website. What it does, is that it uses the window.scroll() function to recognize when the windows changes its scroll position and at the change calls a few functions to load data from the server.

The problem is the .scroll() function is called as soon as there is even a little change in the scroll position and loads data at the bottom; however, what I wish to achieve is to load new data when the scroll/page position reaches at the bottom, like it happens for Facebook feed.

But I am not sure how to detect scroll position using jQuery?

function getData() {
  $.getJSON('Get/GetData?no=1', function (responseText) {
    //Load some data from the server
  })
};

$(window).scroll(function () {
    getData();
});

Upvotes: 212

Views: 747228

Answers (9)

Hassaan Raza
Hassaan Raza

Reputation: 91

GET Scroll Position:

var scrolled_val = window.scrollY;

DETECT Scroll Position:

$(window).scroll
(
     function (event) 
     {
          var scrolled_val = window.scrollY;
          alert(scrolled_val);
     }
 );

Upvotes: 0

RinShan Kolayil
RinShan Kolayil

Reputation: 23

$('.div').scroll(function (event) {
 event.preventDefault()
 var scroll = $(this).scrollTop();
 if(scroll == 0){
   alert(123)
 }
});

This code for chat_boxes for loading previous messages

Upvotes: 0

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

You can extract the scroll position using jQuery's .scrollTop() method

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    // Do something
});

Upvotes: 377

Ferhat KOÇER
Ferhat KOÇER

Reputation: 4065

You can add all pages with this code:

JS code:

 /* Top btn */
    $(window).scroll(function() {
        if ($(this).scrollTop()) {
            $('#toTop').fadeIn();
        } else {
            $('#toTop').fadeOut();
        }
    });
    var top_btn_html="<topbtn id='toTop' onclick='gotoTop()'>&#8593;</topbtn>";
    $('document').ready(function(){
        $("body").append(top_btn_html);
    });
    function gotoTop(){
        $("html, body").animate({scrollTop: 0}, 500);    
    }
    /* Top btn */

CSS CODE 

/*Scrool top btn*/
#toTop{
    position: fixed;
    z-index: 10000;
    opacity: 0.5;
    right: 5px;
    bottom: 10px;
    background-color: #ccc;
    border: 1px solid black;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    color: black;
    font-size: 22px;
    font-weight: bolder;
    text-align: center;
    vertical-align: middle;
}

Upvotes: 0

Ande Caleb
Ande Caleb

Reputation: 1204

Now that works for me... 

$(document).ready(function(){

    $(window).resize(function(e){
        console.log(e);                   
    });

    $(window).scroll(function (event) {
        var sc = $(window).scrollTop();
        console.log(sc);
    });

})

it works well... and then you can use JQuery/TweenMax to track elements and control them.

Upvotes: 4

Mauricio Ferraz
Mauricio Ferraz

Reputation: 191

Store the value of the scroll as changes in HiddenField when around the PostBack retrieves the value and adds the scroll. 

//jQuery

jQuery(document).ready(function () {

    $(window).scrollTop($("#<%=hidScroll.ClientID %>").val());

    $(window).scroll(function (event) {
        $("#<%=hidScroll.ClientID %>").val($(window).scrollTop());
    });
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {

    $(window).scrollTop($("#<%=hidScroll.ClientID %>").val());

    $(window).scroll(function (event) {
        $("#<%=hidScroll.ClientID %>").val($(window).scrollTop());
    });
});

//Page Asp.Net
<asp:HiddenField ID="hidScroll" runat="server" Value="0" />

Upvotes: 2

safeer008
safeer008

Reputation: 333

$(window).scroll( function() { 
 var scrolled_val = $(document).scrollTop().valueOf();
 alert(scrolled_val+ ' = scroll value');
});

This is another way of getting the value of scroll.

Upvotes: 6

yeyene
yeyene

Reputation: 7380

Check here DEMO http://jsfiddle.net/yeyene/Uhm2J/

function getData() {
    $.getJSON('Get/GetData?no=1', function (responseText) {
        //Load some data from the server
    })
};

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
       // getData();
   }
});

Upvotes: 36

David Freitag
David Freitag

Reputation: 2272

You are looking for the window.scrollTop() function.

$(window).scroll(function() {
    var height = $(window).scrollTop();

    if(height  > some_number) {
        // do something
    }
});

Upvotes: 124

Related Questions