javascript - Asp.net webform infinity scroll -

i have page shows product catalog populated webmethod. when user click on image redirect details page. when user come catalog id page scroll bottom @ product visited

how can accomplish this

my html

<div class="articoli">  </div> 

my javascript

<script> $(document).ready(function () {     var skip = 9;     var take = 9;      function load(skip, take) {         $('#divpostsloader').html('<img src="images/loading.gif" height="100" />');          $.ajax({             type: "post",             url: "page.aspx/loadproduct",             data: "{ skip:" + skip + ", take:" + take + " }",             contenttype: "application/json; charset=utf-8",             datatype: "json",             success: function (data) {                 if (data != "") {                     //accodo dati div                     $('.articoli').append(data.d);                 }                 $('#divpostsloader').empty();              },              error: function () {                 alert('error');             }         })     };      $(window).scroll(function () {         if ($(window).scrolltop() == ($(document).height() - $(window).height())) {             load(skip, take);             skip = skip + 9;         }     }); }); 

my c# webmethod

[system.web.services.webmethod] public static string loadproduct(int skip, int take) {     stringbuilder getproduct = new stringbuilder();      mydatabaseentities db = new mydatabaseentities();     var prod = (from in db.tab                 select a).skip(skip).take(take);      foreach (var in prod)     {         var codart = a.codart;         var prezz = a.prezz;         var pathimg = a.pathimg;          getproduct.append("<div class=\"col-md-4\">");         getproduct.append("<div class=\"col-md-6 text-left\">");         getproduct.appendformat(string.format("<a href='details.aspx?articolo={0}' class=\"codart\" >", codart));         getproduct.appendformat("<span class=\"codart\">{0}</span>", codart);         getproduct.append("</a>");         getproduct.append("</div> ");         getproduct.append("<div class=\"col-md-6 text-right\" style=\"color:gray;font-size:large;\">");         getproduct.appendformat(string.format("{0:c}",  prezz));         getproduct.append("</div> ");         getproduct.appendformat(string.format("<a href='details.aspx?articolo={0}' class=\"codart\" >", codart));         getproduct.appendformat(string.format("<img src='{0}' class='img-responsive myimage' alt='{1}'/>", pathimg, codart));         getproduct.append("</a>");         getproduct.append("</div> ");     }     return getproduct.tostring(); } 

how can scroll bottom @ page load?

try adding id item(s) want scroll to. can then, depending on how want tackle it, either href or assign said id through script initiate scroll. here can see more details on how scroll specific part of page using component's id.

i add unique id each item in list. write script read/set variable item scroll to. mind you, i'm writing on whim might need correct or alter fit needs.

you can use this save , read cookies jquery.

the script this:

var scrolltoid;  $(document).ready(function () {     var cookie = $.cookie('last_clicked_id');     if (cookie != '') {         scrolltoid = cookie;     } else {         scrolltoid = '#';     }     $("html, body").animate({ scrolltop: $(scrolltoid).offset().top }, 1000); });  $('.productitemclass')     .on('click',         function() {             $.cookie('last_clicked_id', $(this).attr('id'));         });