JQuery scrollTop в контейнере при нажатии работает только один раз

Я пытаюсь создать своего рода слайдер контента с помощью простейшего jQuery, без плагина и без присвоения идентификаторов каждому div.

У меня есть фиксированная позиция #container, которая составляет 100% ширины и 45% высоты страницы и содержит 5 элементов div с именем .sect. все 5 .sect составляют 100% ширины контейнера, а также 45% высоты страницы, что означает, что 1 .sect будет заполнять видимую часть #container при прокрутке.

div #down вне #container должен при щелчке сделать #container прокруткой к каждому из .sect. это мой jQuery для него. Я установил значение scrollTop на высоту .sect, чтобы #container прокручивал точную высоту каждого раздела при каждом нажатии.

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

при первом нажатии #down #container без проблем прокручивается от 1-го .sect до 2-го .sect, но после этого #down больше ничего не делает. jsfiddle - я думаю, что html и css не примечательны. Я новичок в jQuery, поэтому, пожалуйста, объясните, что мне не хватает!


jquery onclick scrolltop jquery-animate jquery-click-event
person ampora    schedule 07.05.2016    source источник
comment
Посмотрите в этой теме: stackoverflow.com/a/28052027/6294054   -  person J.C. Fong    schedule 07.05.2016
comment
@ J.C.Fong, спасибо, что направили меня к этому! я прочитал и понял логику jQuery для их примера, и я применил jQuery к своему макету, но он не работает так же. это, вероятно, как-то связано с моей высотой div, но я точно не знаю, почему он не работает с тем же jsfiddle. сеть/vq23tku7/14   -  person ampora    schedule 07.05.2016

Ответы (1)


arrow_upward
2
arrow_downward

Я думаю, вам не хватает того, что контейнер должен продолжать прокручиваться в зависимости от того, сколько прокрутки он сделал, ваш код прокручивается только до высоты 1 .sect, он должен быть таким:

ScrollTop: прокручивается + высота

scrollTop: $("#container").scrollTop() + $(".sect").height();
person dvr    schedule 07.05.2016
comment
Спасибо вам большое за это! я не читал документ scrollTop достаточно внимательно, но теперь, когда я это сделал, это имеет смысл! scrollTop — положение полосы прокрутки элемента. - person ampora; 08.05.2016
comment
Рад, что помог, наверное. - person dvr; 08.05.2016