Come rilevare la posizione di scorrimento della pagina usando jQuery

Ho problemi con le funzionalità di jQuery sul mio sito web. Quello che fa, è che usa la funzione window.scroll() per riconoscere quando la finestra cambia la sua posizione di scorrimento e al cambio chiama alcune funzioni per caricare i dati dal server.

Il problema è che la funzione .scroll() viene chiamata non appena c’è anche un piccolo cambiamento nella posizione di scorrimento e carica i dati nella parte inferiore; tuttavia, ciò che desidero ottenere è caricare nuovi dati quando la posizione di scorrimento / pagina raggiunge in basso, come accade per i feed di Facebook.

Ma non sono sicuro di come rilevare la posizione di scorrimento usando jQuery?

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

Puoi estrarre la posizione di scorrimento usando il metodo .scrollTop() di jQuery

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

Stai cercando la funzione window.scrollTop() .

 $(window).scroll(function() { var height = $(window).scrollTop(); if(height > some_number) { // do something } }); 

Controlla qui 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(); } }); 
 $(window).scroll( function() { var scrolled_val = $(document).scrollTop().valueOf(); alert(scrolled_val+ ' = scroll value'); }); 

Questo è un altro modo per ottenere il valore di scroll.

Ora funziona per me …

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

funziona bene … e quindi puoi usare JQuery / TweenMax per tenere traccia degli elementi e controllarli.

Memorizza il valore dello scroll come modifiche in HiddenField quando intorno al PostBack recupera il valore e aggiunge lo 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  

Puoi aggiungere tutte le pagine con questo codice:

Codice JS:

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

CODICE CSS

 /*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; }