title: How can I make it so only the tab area loads instead of the page jumping to the top after clicking on tab?
body: <p>As the title states, I'm making a tabbed section to switch content upon click which works fine, how can I make it so upon clicking a new tab it has a smooth transition to the content as well as prevent jumping to the top of the page every time I click a tab?</p>
  <p>I've tried adding the function which prevents it for links but this isn't a link so that doesn't seem to be working.</p>
  <p><strong>HTML</strong></p>
  <pre><code> &lt;section class=&quot;featured-books&quot;&gt;
          &lt;div class=&quot;featured-books-title&quot;&gt;&lt;h2&gt;Featured Books&lt;/h2&gt;&lt;/div&gt;
          &lt;ul class=&quot;tabs&quot;&gt;
              &lt;li data-tab-target=&quot;#featured&quot; class=&quot;active tab&quot;&gt;Featured&lt;/li&gt;
              &lt;li data-tab-target=&quot;#on-sale&quot; class=&quot;tab&quot;&gt;On Sale&lt;/li&gt;
              &lt;li data-tab-target=&quot;#most-viewed&quot; class=&quot;tab&quot;&gt;Most Viewed&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div id=&quot;featured&quot; data-tab-content class=&quot;active&quot;&gt;
              &lt;div class=&quot;featured-tab&quot;&gt;
                  &lt;img src=&quot;./images/12-rules.jpg&quot;&gt;
                  &lt;img src=&quot;./images/7-habits.jpg&quot;&gt;
                  &lt;img src=&quot;./images/art-of-war.jpg&quot;&gt;
                  &lt;img src=&quot;./images/boundaries.jpg&quot;&gt;
                  &lt;img src=&quot;./images/unlimited-memory.jpg&quot;&gt;
                  &lt;img src=&quot;./images/meaning-of-marriage.jpg&quot;&gt;
                  &lt;img src=&quot;./images/meditations.jpg&quot;&gt;
                  &lt;img src=&quot;./images/peaceful-parents.jpg&quot;&gt;
                  &lt;img src=&quot;./images/plant-paradox.jpg&quot;&gt;
                  &lt;img src=&quot;./images/spirit-filled-life.jpg&quot;&gt;
                  &lt;img src=&quot;./images/javascript-definitive-guide.jpg&quot;&gt;
                  &lt;img src=&quot;./images/atomic-habits.jpg&quot;&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id=&quot;on-sale&quot; data-tab-content&gt;
          &lt;/div&gt;
          &lt;div id=&quot;most-viewed&quot; data-tab-content&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>.featured-books h1 {
      display: flex;
      justify-content: center;
  }
  
  [data-tab-content] {
      display: none;
  }
      
  .active[data-tab-content] {
      display: block;
  }
      
  .tabs {
      display: flex;
      justify-content: center;
      list-style-type: none;
      margin: 0;
      padding-bottom: 60px;
      padding-top: 16px;
  }
  
  
  .tab {
      border-radius: 20px;
      cursor: pointer;
      padding: 10px;
  }
  
  .tab.active {
      background-color: #CCC;
  }
  
  .tab:hover {
      background-color: #aaa;
  }
  
  
  
  /**------FEATURED TAB CONTENT------*/
  
  .featured-tab {
      position: absolute;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      width: 100vw;
      display: grid;
      grid-template-columns: repeat(auto-fill,minmax(300px,300px));
      column-gap: 3px;
      row-gap: 40px;
    }
    
    .featured-tab img {
      width: 180px;
      height: auto;
      object-fit: cover;
      object-position: center;
    } 
  </code></pre>
  <p><strong>JavaScript</strong></p>
  <pre><code>const tabContents = document.querySelectorAll('[data-tab-content]')
    
    tabs.forEach(tab =&gt; {
      tab.addEventListener('click', () =&gt; {
        const target = document.querySelector(tab.dataset.tabTarget)
        tabContents.forEach(tabContent =&gt; {
        tabContent.classList.remove('active')
      })
      tabs.forEach(tab =&gt; {
        tab.classList.remove('active')
      })
      tab.classList.add('active')
      target.classList.add('active')
    })
  }) 
  </code></pre>