How can I scroll to specific element using the waypoint scrolling?

Question

The #2 id of an element only loads after scrolling down because I can't get it using getElementById("#2").

//JS code

$(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();
  }
});

Example: On page loading only showing 1,6,3,4,5

after scrolling down i only getting 2,

I want to directly scroll to the '2' element in the first time age load.

It's not at all clear what you're trying to do or what the problem is. Can you please edit the question to give some more details. — Rory McCrossan, Sep 25 '19 at 08:46

score 0 · Answer 1 · answered Sep 25 '19 at 08:48

0

You should use getElementById([id]) function without "#".

For your case:

Change the line document.getElementById('#16') into document.getElementById('16')

More information can be found here: Document.getElementById()

answered Sep 25 '19 at 08:48

Umur Dinçer

91
6

How can I scroll to specific element using the waypoint scrolling?

1 Answers1