1

I'm trying to make a content slider of sorts with the simplest jQuery possible, without a plugin and without assigning ids to each div.

I have a fixed position #container that is 100% width and 45% height of the page and contains 5 divs called .sect. all 5 .sect are 100% width of the container and are also 45% height of the page, which means that 1 .sect would fill the visible portion of #container, when scrolled to.

a div #down outside #container should, on click, make the #container scroll to each of the .sects. this is my jQuery for it. I set the value of scrollTop to the height of .sect so that #container will scroll the exact height of each sect every time it is clicked. 

$('#down').on('click', function(e) {
    e.preventDefault();
    $('#container').animate({ scrollTop:$('.sect').height()  })
});

the first time #down is clicked, #container scrolls from the 1st .sect in view to the 2nd .sect with no problem, but after that, #down doesn't do anything anymore. jsfiddle - the html and css aren't notable, i think. I'm new to jQuery so please explain what i'm missing!

ampora
  • 43
  • 8
  • Look into this thread: http://stackoverflow.com/a/28052027/6294054 – J.C. Fong May 07 '16 at 04:05
  • @J.C.Fong thank you for directing me to this! i read over and understood the logic behind the jQuery for their example and I applied the jQuery to my layout, but it doesn't work the same. it probably has something to do with my div height but i don't know exactly why it's not working the same https://jsfiddle.net/vq23tku7/14/ – ampora May 07 '16 at 06:02

1 Answers1

2

I think you are missing that the container should keep scrolling depending on how much of scroll it has done, your code only scrolls down to the height of 1 .sect it should be like:

ScrollTop: scrolled + height

scrollTop: $("#container").scrollTop() + $(".sect").height();
dvr
  • 885
  • 5
  • 20
  • thank you so much for this! i didn't read the scrollTop doc closely enough but now that I did, this makes sense! scrollTop is the position of the scrollbar of the element. – ampora May 08 '16 at 01:26
  • Glad i helped, i guess. – dvr May 08 '16 at 01:49