arrow_back
View code

<div class="cdt-container cdt-padding-top-xxlg width-100 width-60@md margin-x-auto">
  <a href="#section2" class="smooth-scroll font-medium color-primary text-default">Scroll to section 2</a>
  <a href="#section3" class="margin-md smooth-scroll font-medium color-primary text-default">Scroll to section 3</a>
  <section id="section1" class="padding-top-lg">
    <h1>Section 1</h1>
    <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa quisquam est harum, quis enim ea
      officiis sapiente soluta? Quis eos necessitatibus dolor ratione, magnam iusto. Saepe ipsam corrupti ut ad iusto
      cum, sit excepturi enim quidem ducimus aut sequi modi corporis libero rerum sed natus, dolore veniam quam.
      Perferendis deleniti accusantium assumenda, odio labore nesciunt mollitia tempore dignissimos possimus, deserunt
      praesentium fugit atque commodi minima optio provident voluptatibus eaque, aliquam modi necessitatibus. Minus
      maxime animi odit cupiditate rem dolorem ipsum consectetur aut fugit quia itaque ex veniam distinctio ea
      deleniti alias, ipsam veritatis at ut fugiat labore dicta. Quia fugit recusandae earum, sequi autem vitae
      laborum expedita? Dolore quos deserunt culpa nobis corporis mollitia saepe alias similique perferendis accusamus
      nisi cupiditate sit eligendi rem aut earum minima inventore ducimus ullam, voluptates quaerat deleniti
      exercitationem hic! Praesentium perspiciatis sunt minima amet nulla, nisi velit officia doloremque a eius odit
      veritatis minus, quos dolorem expedita at ipsum ut itaque libero. Quibusdam facere, asperiores labore vero
      adipisci veritatis ea tempore officiis, sapiente et laboriosam error sint corrupti nisi eius nulla eveniet,
      impedit pariatur atque illo obcaecati! Sint architecto sapiente dolorem aliquam atque, reprehenderit assumenda
      dignissimos veritatis? Perspiciatis non voluptatem fugit alias quos architecto ad debitis nisi cumque ipsum
      temporibus officia provident, qui sed optio error eveniet modi fuga inventore dolore commodi odit quae minima.
      Quasi expedita nostrum perspiciatis veniam natus architecto debitis delectus qui, voluptatum, maiores quis quo
      tempora doloribus ipsum ut sit beatae facilis! Facilis impedit optio pariatur eveniet nemo, quas, commodi magnam
      exercitationem officiis cupiditate numquam, perferendis aut omnis repudiandae. Rem placeat nobis porro ipsum
      deserunt assumenda perspiciatis quo laudantium qui, dignissimos odio a neque sint sapiente commodi, sunt
      reprehenderit ipsa. Pariatur voluptatem maiores velit explicabo corrupti incidunt ea maxime libero vero quis
      fugiat repellat, dolorum harum, aspernatur facilis cum repellendus laudantium sequi! Reiciendis omnis maxime
      vitae vel rem deleniti ex. Ab totam nobis quidem ducimus, voluptate incidunt! Accusamus dicta debitis doloremque
      alias? Nam praesentium, totam labore omnis perferendis ipsam eos saepe perspiciatis alias blanditiis aspernatur!
      Delectus expedita dolores dignissimos nulla laborum ab ipsam ad accusantium! Voluptatum ad ratione, aliquam
      dignissimos molestiae, debitis ab illo ea error officiis nisi incidunt blanditiis quos? Sint fugiat cumque,
      similique nobis vitae ducimus distinctio officia quo cupiditate ad corporis nemo architecto praesentium fugit
      eum maxime soluta dolor debitis libero reiciendis ipsa! Fugiat dolorum iusto ipsa illum ea ut. Eaque, optio!
      Explicabo corrupti omnis cum debitis laudantium ducimus? Quam, doloremque voluptatum minus veritatis numquam
      beatae sapiente quasi atque, architecto vero dicta iusto! Voluptatibus sunt officia, velit quaerat ex eveniet
      cumque, obcaecati natus nam sint ipsa libero, ullam provident soluta asperiores voluptates voluptate maiores
      inventore. Aut veritatis voluptatibus facilis vel, id repudiandae vitae, ducimus ipsam, beatae perspiciatis sed
      blanditiis. Culpa accusamus commodi ex. Dolores qui culpa quaerat vitae a deleniti quis tenetur sunt nam iure
      iusto molestias quisquam eligendi esse perferendis est voluptatem ipsa, voluptatum distinctio, omnis cupiditate?
      Vel voluptates velit nemo, sequi, quo, dolorem et nulla repellat rem fuga quod sapiente facere numquam.
      Accusamus, aliquid laudantium?</p>
  </section>
  <section id="section2" class="padding-top-lg">
    <h1>Section 2</h1>
    <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima optio, voluptate eos porro esse
      fuga laboriosam quidem. Magni obcaecati dignissimos recusandae officia quae ab eaque natus quibusdam iusto
      consequuntur commodi, delectus voluptatem consequatur assumenda nam vitae eos vel, in iste aliquam quos
      voluptate mollitia doloremque aspernatur. Ut sapiente incidunt temporibus. Numquam sequi nobis laboriosam
      doloribus quia obcaecati in quaerat, necessitatibus soluta totam ab esse cupiditate expedita quam dolores
      deleniti. Provident vitae architecto doloremque adipisci nostrum exercitationem iste eveniet asperiores at quia
      omnis nisi quibusdam, illum tempora, ipsa officiis iusto aliquid sit ea nesciunt, quam eum. Odit expedita
      excepturi ullam dicta consequuntur ea aliquid odio omnis doloribus repellendus ex optio aperiam molestias eius
      eum tempore sit, rem, explicabo libero est dignissimos, tenetur soluta cumque ad! Magni voluptatibus enim
      impedit in. A ea sunt nesciunt repudiandae? Error molestiae possimus dolorum soluta exercitationem accusamus
      architecto nihil perspiciatis dolores, velit modi, quas eaque atque dicta odit fuga aspernatur recusandae nobis
      at? Officiis incidunt sit, repudiandae, perspiciatis enim temporibus voluptate distinctio commodi nulla ipsa
      deserunt. Impedit in doloribus, voluptatum, laborum qui vitae voluptates minima iusto quisquam tempore adipisci
      est laudantium ducimus corporis. Atque omnis eaque veniam reprehenderit vel veritatis ex recusandae dicta quam
      quaerat similique iste aperiam vero, sequi rerum vitae, nisi, quae adipisci nesciunt error placeat non illo.
      Magni quas delectus deleniti perspiciatis accusantium, autem consequatur ipsa architecto, ad culpa laboriosam
      eaque! Quasi at cupiditate quae facere ducimus nihil rem rerum omnis, dolores officia accusantium similique
      consequuntur reiciendis architecto quidem saepe? Tempora earum voluptas veritatis rem aspernatur eius quibusdam,
      est dolores, quaerat alias sed quo aliquid. Dolor fuga officia delectus cumque reprehenderit. Labore veritatis
      corporis beatae, atque maxime deserunt alias rerum aut est accusamus quae distinctio numquam. Quae, tempora
      minima officia, quis facilis explicabo exercitationem soluta dolorum laudantium hic totam provident odio cum
      odit.</p>
  </section>
  <section id="section3" class="padding-top-lg">
    <h1>Section 3</h1>
    <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima optio, voluptate eos porro esse
      fuga laboriosam quidem. Magni obcaecati dignissimos recusandae officia quae ab eaque natus quibusdam iusto
      consequuntur commodi, delectus voluptatem consequatur assumenda nam vitae eos vel, in iste aliquam quos
      voluptate mollitia doloremque aspernatur. Ut sapiente incidunt temporibus. Numquam sequi nobis laboriosam
      doloribus quia obcaecati in quaerat, necessitatibus soluta totam ab esse cupiditate expedita quam dolores
      deleniti. Provident vitae architecto doloremque adipisci nostrum exercitationem iste eveniet asperiores at quia
      omnis nisi quibusdam, illum tempora, ipsa officiis iusto aliquid sit ea nesciunt, quam eum. Odit expedita
      excepturi ullam dicta consequuntur ea aliquid odio omnis doloribus repellendus ex optio aperiam molestias eius
      eum tempore sit, rem, explicabo libero est dignissimos, tenetur soluta cumque ad! Magni voluptatibus enim
      impedit in. A ea sunt nesciunt repudiandae? Error molestiae possimus dolorum soluta exercitationem accusamus
      architecto nihil perspiciatis dolores, velit modi, quas eaque atque dicta odit fuga aspernatur recusandae nobis
      at? Officiis incidunt sit, repudiandae, perspiciatis enim temporibus voluptate distinctio commodi nulla ipsa
      deserunt. Impedit in doloribus, voluptatum, laborum qui vitae voluptates minima iusto quisquam tempore adipisci
      est laudantium ducimus corporis. Atque omnis eaque veniam reprehenderit vel veritatis ex recusandae dicta quam
      quaerat similique iste aperiam vero, sequi rerum vitae, nisi, quae adipisci nesciunt error placeat non illo.
      Magni quas delectus deleniti perspiciatis accusantium, autem consequatur ipsa architecto, ad culpa laboriosam
      eaque! Quasi at cupiditate quae facere ducimus nihil rem rerum omnis, dolores officia accusantium similique
      consequuntur reiciendis architecto quidem saepe? Tempora earum voluptas veritatis rem aspernatur eius quibusdam,
      est dolores, quaerat alias sed quo aliquid. Dolor fuga officia delectus cumque reprehenderit. Labore veritatis
      corporis beatae, atque maxime deserunt alias rerum aut est accusamus quae distinctio numquam. Quae, tempora
      minima officia, quis facilis explicabo exercitationem soluta dolorum laudantium hic totam provident odio cum
      odit.</p>
  </section>
</div>
                        
Copy HTML

/*
 * File: _smooth-scroll.scss
 * Location /src/scss/components
 * Smooth scroll component
 */

html {
      scroll-behavior: smooth;
      scroll-padding: 0;
    }
                        
Copy SCSS

/*
 * File: smooth-scroll.js
 * Location /src/js/components
 * Smooth scroll component
*/

document.querySelectorAll(".smooth-scroll").forEach((trigger) => {
  const targetPath = trigger.getAttribute("href");
  const targetPosition = document
    .querySelector(targetPath)
    .getBoundingClientRect().top;
  if (!Kodhus.Utils.cssSupports("scroll-behavior", "smooth")) {
    trigger.addEventListener("click", (e) => {
      e.preventDefault();
      Kodhus.Utils.scrollTo(targetPosition + window.scrollY, 400, () => {
        history.pushState(null, null, targetPath);
      });
    });
  }
});

Copy JS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.