Question

我的网站使用JavaScript在用户点击超链接时启用平滑滚动。由于登陆页面具有弹跳的V形符号，因此用户可以顺利地单击以导航到页面的下一部分。

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

bootstrap和我的JavaScript平滑滚动都依赖于锚标记来运行。

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

平滑滚动的代码：

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

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>

如您所见，我正在利用轮播功能的数据属性。

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

如何定制平滑滚动的JavaScript以忽略我的Bootstrap Carousel？

1 个答案: