javascript - How to trigger automatic page scroll on a particular page position with sound -

i trying create interactive web comic (in html, css , javascript) want trigger automatic page scroll down @ defined speed 1 point point, make sequential animation using multiple jpg images.

in simple words, when reader scrolls , reaches (my defined) position of page, page automatically force scrolls page further down @ pre-defined point.

exactly did in web toon: http://comic.naver.com/webtoon/detail.nhn?titleid=350217&no=31

i want trigger sound effects, did in above mentioned link...

i tried accomplish using following script, unable control start , stop position scroll. plus want scroll once on single page load.

<script language=javascript1.2>  //change 1 integer alter scroll speed. greater faster    var speed=1    var currentpos=0,alt=1,curpos1=0,curpos2=-1    function initialize(){    startit()    }    function scrollwindow(){    if (document.all &&    !document.getelementbyid)    temp=document.body.scrolltop    else    temp=window.pageyoffset    if (alt==0)    alt=2    else    alt=1    if (alt==0)    curpos1=temp    else    curpos2=temp    if (curpos1!=curpos2){    if (document.all)    currentpos=document.body.scrolltop+speed    else    currentpos=window.pageyoffset+speed    window.scroll(0,currentpos)    }    else{    currentpos=0    window.scroll(0,currentpos)    }    }    function startit(){    setinterval("scrollwindow()",50)    }    window.onload=initialize    </script>

thanks in advance

here basic auto scroll function trigger when user scrolls past 300px.

var scroll = true;  $(window).scroll(function () {          var position = $(document).scrolltop();         console.log(position);          if(position > 300 && position < 400 && scroll==true ) {             scroll = false;              $('html,body').animate({                 scrolltop: $("#scrollto").offset().top             },2000);          }     }) 

edit

at moment once time thing, if add if statement after first if statement reset scroll state true , allow run again.

if (position > 0 && position < 300 && scroll==false) {         scroll = true;        } 

edit

to sound play can use new .play command , add happens in if statement, here example of .play code;

$('#videoid').get(0).play(); 

edit

here code working not setting position finding divs position - here working in jsfiddle - https://jsfiddle.net/3fxcbs2k/3/

    var scroll = true;  $(window).scroll(function (e) {      var position = $(document).scrolltop();     var startp = $("#scrolltoo").position();     var finishp = $("#scrollto");      if(position > startp.top && startp.top+100 && scroll==true ) {         scroll = false;          $('html,body').animate({scrolltop: finishp.offset().top},2000);      } if (position > 0 && position < 300 && scroll==false) {         scroll = true;        } }) 

to set position want start scrolling change value of

var startp = $("      ").position(); 

then set finish position change value of

var finsihp = $("      "); 

audio

<audio id="sound">     <source src="sound.mp3" type="audio/mpeg"> </audio> 

var scroll = true;

$(window).scroll(function (e) {

var position = $(document).scrolltop(); var startp = $("#scrolltoo").position(); var finishp = $("#scrollto"); 

jquery play looks - $('#sound').get(0).play();

so add happens when triggered, below.

    if(position > startp.top && startp.top+100 && scroll==true ) {         scroll = false;          $('html,body').animate({scrolltop: finishp.offset().top},2000);         $('#sound').get(0).play();      } if (position > 0 && position < 300 && scroll==false) {         scroll = true;        } }) 

to make more following

think of var id tags can called upon later in code , after = there values example;

var startp = $("#scrolltoo").position(); 

startp vars unique name, , value div id of scrolltoo position.

so make more start , end points have make more vars 1 start , 1 end point. example;

var startp = $("#scrolltoo").position(); var finishp = $("#scrollto");  var startp2 = $("#point2").position(); var finishp2 = $("#pint2"); 

and make if statement, same before replace start points , end points,

if(position > startp2.top && startp2.top+100 && scroll==true ) {             scroll = false;              $('html,body').animate({scrolltop: finishp2.offset().top},2000); 

however because have trigger once have make more var scrolls, 1 each one.

var scroll = true;     var scroll2 = true; var scroll3 = true; var scroll4 = true; 

and each if statement have relevant scroll example second scroll if statement like.

if(position > startp2.top && startp2.top+100 && scroll2==true ) { scroll2 = false;