html - Scroll between divs - jQuery -



html - Scroll between divs - jQuery -

i working on new website, in 1 page.

now have main div called "home", , page's divs called "colordiv". trying switch between divs scrolling , down. html:

<div id="home" class="home_div"> //here home page code </div> <div id="color1" class="color_div" style="background-color:#253412;"> </div> <div id="color2" class="color_div" style="background-color:#956341;"> </div>

and jquery code:

$("document").ready(function() { $('#learnmbtn').click(function(){ $('html, body').animate({ scrolltop: $("#color1").offset().top }, 600); }); var lastscroll = 0; var temp = $("div.color_div"); $(window).scroll(function(event){ //sets current scroll position var st = $(this).scrolltop(); //determines up-or-down scrolling if (st > lastscroll){ $('html, body').animate({ scrolltop: temp.offset().top }, 600); temp = temp.next(); } else { //here scroll code(prev) } //updates scroll position lastscroll = st; }); });

and not work me, , have no thought how scroll code, can help me?

var temp = $("div.color_div"); means temp variable series of elements classname has color_div.

so, utilize temp.offset().top below, jquery don't current offset().top.

if .color_div has id #color1 #color2 or #colorn, maybe can utilize lastly number counter , identity, :

var counter = 1; var temp = $("#color"+counter); $(window).scroll(function(event){ if (st > lastscroll){ $('html, body').animate({ scrolltop: temp.offset().top }, 600); counter++; temp = $("#color"+counter); } else { counter--; temp = $("#color"+counter); } });

jquery html css scroll website

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -