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

2 Comments on “Smooth Scroll”

  • Gemiestu Rivali

    says:

    Hi, is there an elegant way of adjusting the offset? I was looking for that after increasing the height of the Navbar, and I couldn’t find a way except for altering the original theme files

    • Basti

      says:

      Hi Gemiestu,

      unfortunately not yet. The smooth-scroll script will be removed when Safari supports scroll-behaviour: smooth;. Offset will be done then by CSS instead by JS. As long as Safari does not support this, there is unfortunately no possibility to adjust the offset in the child. So, setting the offset to your header can be only made by original theme files so far.

Comments are closed.

To top