javascript - Check if div is in view, if so, move to top of window -

i have full screen swiper when user hits last slide automatically scrolls down content. part that:

heroswiper.on('onreachend', function(){      settimeout(function(){       $('html,body').animate({         scrolltop: $(".section").offset().top       });       heroswiper.lockswipes();       heroswiper.disablemousewheelcontrol();   }, 100);  });  heromediaswiper.on('onreachend', function(){      settimeout(function(){       $('html,body').animate({         scrolltop: $(".section").offset().top       });              heromediaswiper.lockswipes();       heromediaswiper.disablemousewheelcontrol();   }, 100);  }); 

if user scrolls content , part of swiper in view want scroll top of window. so in theory, either see full screen swiper or main content.

this supposed user top of window if part of hero banner in view:

$(window).scroll(function(){     settimeout(function(){     if ($('#hero').isonscreen(0.3, 0.3) == true) {          $('html,body').animate({             scrolltop: $("#hero").offset().top             heroswiper.slideto(0);                   heroswiper.enablemousewheelcontrol();             heroswiper.unlockswipes();             heromediaswiper.slideto(0);             heromediaswiper.enablemousewheelcontrol();             heromediaswiper.unlockswipes();         });                };     }, 100);     }); 

at moment scrolls down main content straight top of page.

this script check if in view:

$.fn.isonscreen = function(){      var win = $(window);      var viewport = {         top : win.scrolltop(),         left : win.scrollleft()     };     viewport.right = viewport.left + win.width();     viewport.bottom = viewport.top + win.height();      var bounds = this.offset();     bounds.right = bounds.left + this.outerwidth();     bounds.bottom = bounds.top + this.outerheight();      return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));  }; 

or if there's better way please let me know!!

you may want throttle window scroll handler calls. , want bypass scroll handler altogether when animate function causing scroll itself.

when using scroll handlers recommend _.throttle (or debounce), can access if you're using underscore. can copy source definition of _.throttle (along _.now depends on) underscore annotated source.

$(function () {   var throttle_time = 10; // throttle window scroll handler   var timer = null; // cleartimeout(timer) if want cancel   var waiting = false;    $(window).scroll(_.throttle(function(){     // animation takes time, wait complete     if(waiting) return;      if ($('#hero').isonscreen(0.3, 0.3) == true) {       waiting = true; // we're going animation       // cleartimeout(timer) here, waiting takes care of       timer = settimeout(function(){         var done = false;         $('html,body').animate({             scrolltop: $("#hero").offset().top           },           function () {             // executed twice (once html , once body)             waiting = false; // animation complete             if(!done) {               done = true; // want run stuff once:               heroswiper.slideto(0);                     heroswiper.enablemousewheelcontrol();               heroswiper.unlockswipes();               heromediaswiper.slideto(0);               heromediaswiper.enablemousewheelcontrol();               heromediaswiper.unlockswipes();             }           }         );       }, 100);     }   }, throttle_time)); });