title: Open popup after scroll to area
body: <p>I have popup that fades on page load:</p>
  
  <pre><code>$("#popup").fadeIn(500).on("load", function(e){
      $('body').addClass('modalIn');
  });
  </code></pre>
  
  <p>Inside popup there's link that scrolls to div #section which contains another link that triggers another popup:</p>
  
  <pre><code>&lt;a href="#section"&gt;learn more&lt;/a&gt;
  </code></pre>
  
  <p>Code that opens my popup in div #section <em>(prepared for having there another popups).</em></p>
  
  <pre><code>$(".steps a").on("click", function(e){
      e.preventDefault();
      var selectedModal = $(this).data("modal");
      $(".modals").fadeIn();
      $(".modal").hide();
      $("#"+selectedModal).fadeIn();
      $('body').addClass('modalIn');
      $.scrollify.disable();
      $('body').on('scroll', function(e){
          e.preventDefault();
      });
  })
  $(".modals").on("click", function(){
      $(".modals, .modal").fadeOut();
      $('body').removeClass('modalIn');
      $.scrollify.enable();       
  });
  </code></pre>
  
  <p>My div #section contains following link:</p>
  
  <pre><code>&lt;a href="#modal-1" data-target="#myModal" data-modal="modal-1"&gt;Open modal 1&lt;/a&gt;
  </code></pre>
  
  <p>I want to open another popup <strong>#modal-1</strong> automatically when user click link "Read more" in first popup (that shows on page load).</p>
  
  <p>I've tried to make this with following code using scrollTo plugin, but unfortunately this doesn't work propely.</p>
  
  <p>First popup fades on page load, I click link to #section and right after that script shows alert window (made for tests) After closing alert window page scrolls to #section. </p>
  
  <p>How to make it work to show alert/trigger popup only after window scrolls to div #section (reaches it)?</p>
  
  <pre><code>$('a[href="#section"]').click(function() {
  $(window).scrollTo('#section', {
      onAfter: function() {
          alert('test');
      }
  })
  });
  </code></pre>