Question

我设计了使用jQuery的平滑滚动。我面临的一个问题是，当我单击navbar链接时，出现了闪烁。

假设我单击Platform链接，则Why v9链接上有闪烁。同样，当我单击其他链接时，上一个链接闪烁。我无法调试它。

有人可以帮我吗？会很有帮助的。

$(document).ready(function() {
  $('.nav-item').click(function() {
    $(".nav-item").removeClass('active');
    $(this).addClass('active');
    $('html, body').animate({
      scrollTop: $($(this).children().attr('href')).offset().top
    }, 800);
    return false;
  });

  //Active Link
  $(window).scroll(function() {
    var scrollbarLocation = $(this).scrollTop();
    $('.nav-link').each(function() {
      var sectionOffset = $($(this).attr('href')).offset().top;

      if (sectionOffset <= scrollbarLocation) {
        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');
      }
    })
  })
});

.navbar-nav {
  font-size: 18px;
  font-weight: bold;
}

.navbar-light .navbar-brand {
  color: #111;
}

.navbar-light .navbar-nav .nav-link {
  color: #111;
}

/* navbar css code */

.navbar ul.navbar-nav li.nav-item a:hover,
.navbar ul.navbar-nav li.nav-item.active a {
  color: #89c353;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">
        Logo
      </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#section1">Why v9
              <span class="sr-only">(current)</span>
            </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section2">Platform</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section3">Process</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section4">Benefits</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0 feedback">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">LOREM IPSUM</button>
      </form>
    </div>
  </div>
</nav>
<div id="section1" style="background:#d1d1d1; height:800px;"></div>
<div id="section2" style="background:#f0f0f0; height:800px;"></div>
<div id="section3" style="background:#d1d1d1; height:800px;"></div>
<div id="section4" style="background:#f0f0f0; height:800px;"></div>

Answer 1

如果通过单击或滚动来滚动，则可以添加一个全局变量以进行检测：

 $(document).ready(function () {
var clickScroll = false; //ADDED

    $('.nav-item').click(function () {
    clickScroll = true; //ADDED
        $(".nav-item").removeClass('active');
        $(this).addClass('active');
        $('html, body').animate({
            scrollTop: $($(this).children().attr('href')).offset().top
        }, 800, function(){
            clickScroll = false; //After the animation is finished set the varriable back to false
        });
        return false;
    });

    //Active Link

    $(window).scroll(function () {
        var scrollbarLocation = $(this).scrollTop();
        //console.log(scrollbarLocation);
        $('.nav-link').each(function () {

            var sectionOffset = $($(this).attr('href')).offset().top;

            if (sectionOffset <= scrollbarLocation && !clickScroll) { //ADDED
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active');
            }
        })
    })

});

Answer 2

我认为您只需编写一行就可以解决此问题。

$(window).scroll(function () {
    // ADD
    if ($('html, body').is(':animated')) { return; }

如果带有标志，则您仍然有问题。单击导航菜单，然后单击其他导航菜单，直到滚动结束。我认为最好先停止动画。

$('html, body').stop().animate({~

Answer 3

Add this in HTML

<script type="text/javascript">
// The function actually applying the offset
function offsetAnchor() {
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 60);
  }
}

// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a.nav-link[href^="#"]', function(event) {
  // Click events are captured before hashchanges. Timeout
  // causes offsetAnchor to be called after the page jump.
  window.setTimeout(function() {
    offsetAnchor();
  }, 0);
});

// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);
</script>

Answer 4

 $(document).ready(function () {

        $('.nav-item').click(function () {
            $(this).prev().hide('fast').show('fast').hide('fast').show('fast').hide('fast').show('fast');
            $(".nav-item").removeClass('active');
            $(this).addClass('active');
            $('html, body').animate({
                scrollTop: $($(this).children().attr('href')).offset().top
            }, 800);
            return false;
        });

        //Active Link

        $(window).scroll(function () {
            var scrollbarLocation = $(this).scrollTop();
            $('.nav-link').each(function () {

                var sectionOffset = $($(this).attr('href')).offset().top;

                if (sectionOffset <= scrollbarLocation) {
                    $(this).parent().addClass('active');
                    $(this).parent().siblings().removeClass('active');
                }
            })
        })

    });

 .navbar-nav {
        font-size: 18px;
        font-weight: bold;
    }


    .navbar-light .navbar-brand {
        color: #111;
    }


    .navbar-light .navbar-nav .nav-link {
        color: #111;
    }




    /* navbar css code */

    .navbar ul.navbar-nav li.nav-item a:hover,
    .navbar ul.navbar-nav li.nav-item.active a {
        color: #89c353;
    }

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
    crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
    crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
 
 <body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">
            Logo
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#section1">Why v9
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#section2">Platform</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#section3">Process</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#section4">Benefits</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0 feedback">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">LOREM IPSUM</button>
            </form>
        </div>
    </div>
</nav>

 <div id="section1" style="background:#d1d1d1; height:800px;"></div>
 <div id="section2" style="background:#f0f0f0; height:800px;"></div>
 <div id="section3" style="background:#d1d1d1; height:800px;"></div>
 <div id="section4" style="background:#f0f0f0; height:800px;"></div>
</body>

</html>

jQuery平滑滚动链接颜色更改不起作用

4 个答案: