CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapbootstrap-4
Munkeeface
Munkeeface

Reputation: 409

How do I tailor my smooth-scrolling JavaScript to ignore my Bootstrap Carousel?

My site uses JavaScript to enable smooth-scrolling when a hyperlink is clicked by the user. It is necessary as the landing-page has a bouncing chevron-down for the user to click to navigate to the next section of the page smoothly.

Lower on the page I have implemented a Bootstrap carousel gallery, which utilizes anchor tags to navigate between the slides in the gallery.

Both the bootstrap and my JavaScript smooth scrolling rely on the anchor tags to operate.

When using the gallery buttons (next and prev), the focus of the page smooth-scrolls to the gallery, which can be frustrating if zoomed out and reading a separate section while browsing the gallery.

The code for the smooth-scrolling:

<script>
      $(document).ready(function(){
        // Add smooth scrolling to all links
        $("a").on('click', function(event) {

          // Make sure this.hash has a value before overriding default behavior
          if (this.hash !== "") {
            // Prevent default anchor click behavior
            event.preventDefault();

            // Store hash
            var hash = this.hash;

            // Using jQuery's animate() method to add smooth page scroll
            // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
            $('html, body').animate({
              scrollTop: $(hash).offset().top - 50
            }, 800, function(){

              // Add hash (#) to URL when done scrolling (default click behavior)
              window.location.hash = hash;
            });
          } // End if
        });
      });
    </script>

The code for the Carousel-gallery:

<div class="carousel slide" id="carousel-gallery" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-gallery" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-gallery" data-slide-to="1"></li>
        <li data-target="#carousel-gallery" data-slide-to="2"></li>
    </ol> 

    <div class="carousel-inner">
        <div class="item active">
            <img src="images/Stock/Mountain-Hero.jpg" alt="First Slide">
        </div>
        <div class="item">
            <img src="images/Stock/Wet-Shoes.jpg" alt="Second Slide">
        </div>
        <div class="item">
            <img src="images/Stock/Tokyo-Downtown.jpg" alt="Third Slide">
        </div>
    </div>

    <a class="left carousel-control" href="#carousel-gallery" data-slide="prev">
        <span class="fa fa-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>

    <a class="right carousel-control" href="#carousel-gallery" data-slide="next">
        <span class="fa fa-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">next</span>
    </a>
</div>

As you can see, I am utilizing the data attributes for carousel functionality.

Upvotes: 0

Views: 388

Answers (1)

grusl83
grusl83

Reputation: 152

you can use jQuery to check if the link is a gallery prev/next button or not. There may be an more elegant a approach.

$(document).ready(function(){
    // Add smooth scrolling to all links
    $("a").on('click', function(event) {

      // Make sure this.hash has a value before overriding default behavior
      if (this.hash !== "" && !$("a").hasClass("carousel-control")) {
        // Prevent default anchor click behavior
        event.preventDefault();

        // Store hash
        var hash = this.hash;

        // Using jQuery's animate() method to add smooth page scroll
        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        $('html, body').animate({
          scrollTop: $(hash).offset().top - 50
        }, 800, function(){

          // Add hash (#) to URL when done scrolling (default click behavior)
          window.location.hash = hash;
        });
      } // End if
    });
  });

Upvotes: 1

Related Questions