Loading...

Smooth Scroll

bootScore has a script that gently scrolls to an anchor on the page. Click me

The offset is set to 55px, what is the height of the navbar.

In some links, smooth scroll must be disabled. For example the following Bootstrap carousel uses an <a> for the controls.

Click the next or prev button. The slideshow will move to the top of the page.

<div id="carouselExampleControls-01" class="carousel slide mb-4" data-bs-ride="carousel">
     <div class="carousel-inner">
         <div class="carousel-item active">
             <img src="https://bootscore.me/wp-content/uploads/2020/05/dark.png" class="d-block w-100" alt="…">
         </div>
         <div class="carousel-item">
             <img src="https://bootscore.me/wp-content/uploads/2020/05/darker.png" class="d-block w-100" alt="…">
         </div>
         <div class="carousel-item">
             <img src="https://bootscore.me/wp-content/uploads/2020/05/dark.png" class="d-block w-100" alt="…">
         </div>
     </div>
     <a class="carousel-control-prev" type="button" href="#carouselExampleControls-01" data-bs-slide="prev" role="button">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Previous</span>
     </a>
     <a class="carousel-control-next" type="button" href="#carouselExampleControls-01" data-bs-slide="next" role="button">
         <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Next</span>
     </a>
 </div>

Disable smooth scroll from <a>

Smooth Scroll can be disabled by adding data-smoothscroll="false" to the link.

<a data-smoothscroll="false" href="#...">Link</a>

Now the next/prev navigation works fine.

<div id="carouselExampleControls-02" class="carousel slide" data-bs-ride="carousel">
     <div class="carousel-inner">
         <div class="carousel-item active">
             <img src="https://bootscore.me/wp-content/uploads/2020/05/dark.png" class="d-block w-100" alt="…">
         </div>
         <div class="carousel-item">
             <img src="https://bootscore.me/wp-content/uploads/2020/05/darker.png" class="d-block w-100" alt="…">
         </div>
         <div class="carousel-item">
             <img src="https://bootscore.me/wp-content/uploads/2020/05/dark.png" class="d-block w-100" alt="…">
         </div>
     </div>
     <a data-smoothscroll="false" class="carousel-control-prev" type="button" href="#carouselExampleControls-02" data-bs-slide="prev" role="button">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Previous</span>
     </a>
     <a data-smoothscroll="false" class="carousel-control-next" type="button" href="#carouselExampleControls-02" data-bs-slide="next" role="button">
         <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Next</span>
     </a>
 </div>

jQuery

If you cannot work directly on the HTML code, for example complex slideshows such as Smart Slider 3 or Slider Revolution, you can add data-smoothscroll="false" with jQuery.

jQuery(document).ready(function ($) {
     $(".carousel-control-prev, .carousel-control-next").attr("data-smoothscroll", "false");
 });

Replace classes or id in line 2

Leave a Comment

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information