Scrollto

<div class="mv-scrollable overflow-y-auto w-full border border-border p-6 rounded-lg text-center h-[300px]" id="scrollable">
  <div class="h-10"></div>
  <button class="mv-btn" id="scrollto_one" data-mv-scrollto="#scrollto_two" data-mv-scrollto-parent="#scrollable">
    Scroll to element<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down size-4" aria-hidden="true">
      <path d="M12 5v14"></path>
      <path d="m19 12-7 7-7-7"></path>
    </svg>
  </button>
  <div class="h-[5000px]"></div>
  <button class="mv-btn" id="scrollto_two" data-mv-scrollto="#scrollto_one" data-mv-scrollto-parent="#scrollable" data-mv-scrollto-offset="-100px">
    Scroll back<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up size-4" aria-hidden="true">
      <path d="m5 12 7-7 7 7"></path>
      <path d="M12 19V5"></path>
    </svg>
  </button>
</div>

<div class="space-y-5">
  <div class="text-center">
    <button id="topx1" class="mv-btn" data-mv-scrollto="#bottomx1">
      Scroll to bottom<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down size-4" aria-hidden="true">
        <path d="M12 5v14"></path>
        <path d="m19 12-7 7-7-7"></path>
      </svg>
    </button>
  </div>
  <div class="h-[940px]"></div>
  <div class="text-center">
    <button id="bottomx1" class="mv-btn" data-mv-scrollto="#topx1" data-mv-scrollto-offset="-50px">
      Scroll to top<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up size-4" aria-hidden="true">
        <path d="m5 12 7-7 7 7"></path>
        <path d="M12 19V5"></path>
      </svg>
    </button>
  </div>
</div>