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
Post a Comment