Как сделать скролл по нажатию кнопки

const buttonSlider = document.getElementById('support-slider')
const buttonSliderUp = document.getElementById('support-slider-up')
const supList = document.getElementById('support-list-id')


const lastItemIndex = 8;
const firstItemIndex = 0

function showNextFund (){
    const lastItem = supList.children[lastItemIndex];
    lastItem.scrollIntoView({ behavior: 'smooth' });
    buttonSlider.style.display = 'none'
    buttonSliderUp.style.display = 'flex'
}

function showFirstFund() {
    const firstItem = supList.children[firstItemIndex];
    firstItem.scrollIntoView({behavior:'smooth'})
    buttonSlider.style.display = 'flex';
    buttonSliderUp.style.display = 'none';
}

buttonSlider.addEventListener('click', showNextFund);

buttonSliderUp.addEventListener ('click',showFirstFund)

<main>
  <section class="main-section">
    <div class="container">
      <div class="wrapper">
        <div class="container-category">
          <div class="categories-box">
            <h3 class="title-of-categories">ALL CATEGORIES</h3>
            <ul class="list-categories">
              <li class="categories-item active"></li>
            </ul>
          </div>
          <div class="support-container">
<h3 class="support-title">Support Ukraine <svg Width='20' Height='32'><use src="./images/support/emblem.svg#emblem"></use></svg></h3>
<ul class="support-list" id="support-list-id">
    <li class="support-list-item">
        <a class="support-site" href="https://www.savethechildren.net/what-we-do/emergencies/ukraine-crisis">01 
            <img src="./images/support/Save-1.png" alt="Save to children"></a></li>
    <li class="support-list-item">
        <a class="support-site" href="https://www.projecthope.org/crisis-in-ukraine-how-to-help/04/2022/">02 
            <img src="./images/support/Hope-2.png" alt="Project Hope" height="32"></a></li>
    <li class="support-list-item">
        <a class="support-site" href="https://u24.gov.ua/uk">03 
            <img src="./images/support/United-3.png" alt="United24" height="15"></a></li>
    <li class="support-list-item">
        <a class="support-site" href="https://internationalmedicalcorps.org/country/ukraine/">04 
            <img src="./images/support/Medical-4.png" alt="International Medical corps" height="32"></a></li>
    <li class="support-list-item">
        <a class="support-site" href="https://storymaps.arcgis.com/stories/2d34f630e50748c5b8e0ce07f640b7d7">05 
            <img src="./images/support/Medicins-5.png" alt="Medecins Sans Frontieres" height="32"></a></li>
    <li class="support-list-item">
        <a class="support-site" href="https://www.razomforukraine.org/ua/homeua/">06 
            <img src="./images/support/Razom-6.png" alt="RAZOM" height="32"></a></li>
    <li class="support-list-item">
        <a class="support-site" href="https://www.actionagainsthunger.org/story/lives-upended-by-ukraine-conflict-refugees-and-residents-in-moldova-share-their-stories/">07 
            <img src="./images/support/Hunger-7.png" alt="Actions Against Hunger" height="32"></a></li>
    <li class="support-list-item">
        <a class="support-site" href="https://www.wvi.org/stories/ukraine/humanitarian-couples-partnership-and-courage-shine-brightly-through-ukraines">08 
            <img src="./images/support/Vision-8.png" alt="World Vision" height="32"></a></li>
    <li class="support-list-item">
        <a class="support-site" href="https://prytulafoundation.org/">09 
            <img src="./images/support/Sergiy-9.png" alt="Sergiy Pritula Found" height="32"></a></li>
</ul>
<button type="button" class="support-slider-btn" id="support-slider"><img src="./images/support/slider.png" alt="slider" class="support-slider"></button></svg>
<button type="button" class="support-slider-btn-up" id="support-slider-up"><img src="./images/support/slider-reverse.png" alt="slider" class="support-slider-up"></button></svg>
          </div> 
        </div>
        <div class="container-category-markup">
          <h2 class="title-category-markup">
            Best Sellers <span class="violet">Books</span>
          </h2>
          <ul class="category-markup-list"></ul>
        </div>
      </div>
    </div>
  </section>
</main>