How to scroll to specific element using the Infinite Scroll With Django?

Question

When I initially load the page, It loads 10 items(1,2,3...10) and after scrolling down I am getting another 10 items(11,12,13,...20). But I need to directly scroll to the 12th element. I am using the Waypoint infinite scrolling(JQuery) and Django pagination.

Jquery :

  $(document).ready(function() {
      $('html, body').animate({
     scrollTop: $("#2").offset().top
     }, 'slow');
  });

// waypoint code:

  var infinite = new Waypoint.Infinite({
  element: $('.infinite-container')[0],
  context: document.getElementById('#16'),
  onBeforePageLoad: function() {
  $('.loading').show();
   },
  onAfterPageLoad: function($items) {
  $('.loading').hide();
  }
  });

While scrolling down the data coming from the Django pagination by triggering the call :

http://localhost:8000/polls/?page=2&type=testpoll

I need to scroll to an element in the 'page=2' while loading the page initially. How can I do this?

use a setInterval which scrolls to the end of page waits for new items to load looks for element 12 if it finds it clear interval else keep on looking. that would be a very stupid solution though. Another idea would be to search item 12 so it ends up on top of your list — joyBlanks, Sep 26 '19 at 05:26
@joyBlanks I have tried scrolling with SetInterval. But if not found the 16th element it scrolls to the bottom of of the page. — Jisha Techversant, Sep 26 '19 at 08:18
well that's why I mentioned it sounds a little awkward. what is your intent for showing 12 on page 2 how do you know its page 2. you need to ask why to scroll to page 2 if loaded and user wants to see item 12 why not bring item 12 right away ?? those are business requirements that you need to straighten out — joyBlanks, Sep 26 '19 at 08:34
actually you need to ask the right question say a post 12 you want to see. how do you do it, you search it on a search bar rather than bringing it up by infinite scroller. you know what I am trying to say? — joyBlanks, Sep 26 '19 at 09:27

Jisha Techversant · Answer 1 · 2019-09-26T08:17:58.330

I have tried scrolling with SetInterval. But if not found the 16th element it scrolls to the bottom of of the page.

if($("#16").length === 0){
    myVar =  setInterval(function(){ 
    $("html, body").animate({ scrollTop: 
    $(document).height()-$(window).height()});
    if($("#16").length !== 0){
        clearInterval(myVar);
        next = $(".infinite-item").parent().next().find($('#16'));
        $('html, body').animate({scrollTop: $('#16').offset().top}, 'slow');
      }
    }, 1000);

  }
});

How to scroll to specific element using the Infinite Scroll With Django?

1 Answers1