Прокрутите вверх до определенного класса в прокручиваемом div - на каждом нажатии кнопки вверх/вниз

Question

У меня есть RSS-лента (скрытое переполнение) с кнопками сверху и снизу div, которые будут плавно прокручивать подача. Я ищу способ, чтобы при каждом нажатии кнопки он прокручивался до верхней части следующего «rss-item» (класса). Этот div выглядит так:

Так что я пытаюсь достичь, так что каждый раз, когда вы нажимаете стрелку вниз (или вверх), прокрутка останавливается, когда каждый «rss-item» находится в верхней части дела. Я изучил многие подобные вопросы, но не мог достичь того, чего хотел.

Вот функция используется для сглаживания прокрутки в DIV:

$(document).ready(function() { 

    var scrollTime = 900; 

$('#upClick').click(function() { 
    $('#homeBlogs').animate({ 
     scrollTop: $('#homeBlogs').scrollTop() + 200 
    }, scrollTime); 
}); 


$('#downClick').click(function() { 
    $('#homeBlogs').animate({ 
     scrollTop: $('#homeBlogs').scrollTop() - 200 
    }, scrollTime); 
}); 


}); 

Вот захват экрана сгенерированного исходного HTML:

Answer 1

Ok, так что я воссоздал это как лучше Я мог бы в jsfiddle. Вот структура HTML. Я попытался построить это в соответствии с скриншотом, чтобы они были похожи. Примечание. Я добавил класс CSS «active» к первому «rss-item». Это должно быть применено только в HTML к первому элементу и должно оставаться здесь, чтобы часть Javascript функционировала правильно.

<div id="blogSection"> 
    <div class="row" id="scrollUp"> 
     <button class="scrollButton" id="upClick">Scroll Up</button> 
    </div> 
    <div id="homeBlogs"> 
     <div class="rss-box"> 
      <p class="rss-title"></p> 
      <ul class="rss-items"> 
       <li class="rss-item active"> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
       </li> 
       <li class="rss-item"> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
       </li> 
       <li class="rss-item"> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
       </li> 
       <li class="rss-item"> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
       </li> 
       <li class="rss-item"> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
       </li> 
       <li class="rss-item"> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
        <p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div id="scrollDown" class="row"> 
     <button class="scrollButton" id="downClick">Scroll Down</button> 
    </div> 
</div> 

Далее, здесь используется CSS. Это исключительно для поддержки демонстрации. Я настроил его так, что «rss-item» имеет «активный» класс, будет выделен красным цветом. Это, надеюсь, даст визуальный сигнал о том, что происходит при нажатии кнопки.

button { 
    display: block; 
    width: 100%; 
    background-color: black; 
    color: white; 
    height: 50px; 
    cursor: pointer; 
} 

#scrollUp { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

#scrollDown { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
} 

.active { 
    color: red; 
} 

И, наконец, вот Javascript, который я использовал для того, чтобы все было сделано. Я многое изменил, чтобы помочь сделать вещи более эффективными и исправить некоторые ошибки.

$(document).ready(function() {}) 
//we can use one single event and modify the behavior based on the direction that was clicked 
.on('click', '.scrollButton', function() { 
    var scrollTime = 900, 
     direction = $(this).attr('id'), 
     $currentItem = $('.rss-item.active'), 
     $newItem; 

    switch (direction) { 
     case 'upClick': 
      $newItem = $currentItem.prev('.rss-item'); 
     break; 

     case 'downClick': 
      $newItem = $currentItem.next('.rss-item'); 
     break; 
    } 

    //if we aren't at the top or bottom of the list already 
    if ($newItem.length > 0) { 
     //since we know we can now change the active item, we need to remove this class so we can apply it to the new item 
     $('.rss-item').removeClass('active'); 

     $newItem.addClass('active'); 
    } 

    //Now that the logic is out of the way, we can run the scroll animation 
    //Also, I think you will want to use 'html, body' as a selector so the page itself moves 
    $('html, body').animate({ 
     scrollTop: $('.rss-item.active').offset().top - 200 //this will keep content positioned correctly, but you shouldn't need both a '+ 200' and '- 200' here. Adjust this value as needed. 
    }, scrollTime); 
}); 

Наконец, вот jsfiddle: https://jsfiddle.net/sm1215/sebgbnr4/