如何调整我的平滑滚动JavaScript以忽略Bootstrap Carousel？

Question

当用户单击超链接时，我的网站使用JavaScript启用平滑滚动。 登陆页面必须具有人字形下移符号，以便用户单击以顺利导航到页面的下一部分。

在页面下方，我实现了一个Bootstrap轮播画廊，该画廊利用锚标签在画廊的幻灯片之间导航。

引导程序和JavaScript平滑滚动都依赖于anchor标签进行操作。

使用图库按钮（下一个和上一个）时，页面的焦点会平滑滚动到图库，如果在浏览图库时缩小并阅读单独的部分，可能会感到沮丧。

平滑滚动的代码：

<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>

旋转木马画廊的代码：

<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>

如您所见，我将数据属性用于轮播功能。

Answer 1

您可以使用jQuery检查链接是否为图库的上一个/下一个按钮。 可能会有更优雅的方法。

$(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
    });
  });