javascript - Scrolling to milestones on page -
im working on website contains of 1 page has 6 divs beneath each other. each div's size screen filling. got script scrolls top of each div, depending on link clicked in navi.
the problem got want write script makes possible autoscroll previous/next div if scroll up/down. example: im on landing screen, seeing first div. if scroll down now, want page autoscroll second (next) div. after animation done , scroll further, script should autoscroll third div , on.
here code far
var position0 = 0; var idarray = ["landingpage", "news", "show", "media", "blog", "contact"]; // divs' ids var milestones = new array(); window.onload = function getpositions() { position0 = $(window).scrolltop(); //getting current position of window (var = 0; < idarray.length; i++) { var genid = idarray[i]; var getheight = document.getelementbyid(genid).offsettop; milestones.push(getheight) //filling milestones array positions needed }; }; window.onscroll = scroll; var direction = ""; //calculated in function below function scroll() { var position1 = $(window).scrolltop(); // getting new position of window var direction = position1 - position0; // calculating direction seperate , down scrolling // following part wrong 1 (var = 0; < milestones.length; i++) { var x = milestones[i]; if (direction > 0 && x > position1) { direction = 0; $('html,body').animate({ scrolltop: x }, 750); return false; break; }; }; }; im aware there jquery mixed within javascript comands work fine.
if execute code, works once cant scroll few seconds, because .onscroll event triggers more once. further not sure if animated scrolling triggers scroll event :/
feel free change code as want
i hope can me
Comments
Post a Comment