javascript - 单页网站上的主动滚动不工作

Question

我试图找到解决方案，但我不能。我的滚动间谍不工作

这是导航html。

<nav class="menu">
    <ul>
      <li><a class = "active" href="#" data-scroll = "home">Home</a></li>
      <li><a href="#" data-scroll = "about">About</a></li>
      <li><a href="#" data-scroll = "about">Our Work</a></li>
      <li><a href="#" data-scroll = "about">Clients</a></li>
      <li><a href="#" data-scroll = "about">Contact</a></li>
    </ul>
  </nav> 

我的导航 CSS 只是增加了，因为我认为 CSS 存在问题，但在网站上它看起来很好，悬停和活动效果可以正常工作，但滚动效果不行。

.menu{
 z-index: 100; 
 position: fixed;
 top: 0;
 left: 25%;
 width: 50%;
 overflow: hidden;
  background-color: transparent;
   /* padding: 20px 0; */


}
.menu ul{

  margin: 5px;
  padding: 0;
  text-align: center;


}
.menu ul li{

  list-style: none;
  margin:0 20px ;
  display: inline;
}
.menu ul li a {
  color: black;
  font-size: 1em;
  line-height: 1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 3px 8px;
  transition: 0.5s;

} 
.menu ul li a.active{
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  color:  #FFC300 ;
}  
.menu ul li:hover{
  border-bottom: 1px solid black;
}
/* On scroll */
.menu.scroll{
  background: yellow;
}

还有我的 jquery/javascript。我是使用 Jquery 的新手，所以我不太确定这段代码是否正确，并且大多数在线代码对我不起作用。

$('nav a').on('click', function() {

    var scrollAnchor = $(this).attr('data-scroll'),
            scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28;

    $('body,html').animate({
            scrollTop: scrollPoint
    }, 500);

    return false;

})


$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
            $('nav').addClass('fixed');
            $('.content section').each(function(i) {
                    if ($(this).position().top <= windscroll - 20) {
                            $('.menu ul li a.active').removeClass('active');
                            $('.menu ul li a ').eq(i).addClass('active');
                    }
            });

    } else {

            $('nav').removeClass('fixed');
            $('.menu ul li a.active').removeClass('active');
            $('.menu ul li a.first').addClass('active');
    }

}).scroll();

任何人有一些好的建议或教程我可以参考？

标签： javascripthtmljquerycss