HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery animate scrollLeft</title>

  <style>

    body { font-family: sans-serif; padding: 16px; }

    #bar {

      width: 260px; overflow-x: auto; overflow-y: hidden;

      white-space: nowrap; border: 1px solid #cbd5e1;

      padding: 6px; scroll-behavior: auto;

    }

    .tab {

      display: inline-block; padding: 8px 16px; margin-right: 4px;

      background: #e2e8f0; border-radius: 6px; cursor: pointer;

    }

    .tab.active { background: #2563eb; color: #fff; }

    .hint { margin-top: 10px; color: #64748b; font-size: 14px; }

  </style>

</head>

<body>

  <div id="bar">

    <span class="tab">Tab 1</span>

    <span class="tab">Tab 2</span>

    <span class="tab">Tab 3</span>

    <span class="tab">Tab 4</span>

    <span class="tab">Tab 5</span>

    <span class="tab">Tab 6</span>

    <span class="tab">Tab 7</span>

    <span class="tab">Tab 8</span>

  </div>

  <p class="hint">Click a tab — bar animates scrollLeft so the tab is visible.</p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    $("#bar").on("click", ".tab", function() {

      var $tab = $(this);

      var $bar = $("#bar");

      $(".tab").removeClass("active");

      $tab.addClass("active");

      var target = $tab.position().left + $bar.scrollLeft() - 20;

      $bar.stop().animate({ scrollLeft: target }, 300);

    });

    $("#bar .tab").last().trigger("click");

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .animate({ scrollLeft }) — smooth scroll (Try It)