使用活动类平滑滚动导航答案

【问题标题】：smooth scroll navigation with active class使用活动类平滑滚动导航
【发布时间】：2015-12-08 03:48:03
【问题描述】：

我一直在为网站制作平滑滚动导航栏。我已经设法让导航栏滚动到 HTML 文档中的不同部分，并且我一直试图让导航栏链接根据您所在的网页部分变为活动状态。

在玩弄了代码之后，我不知道该怎么做。我需要做什么？

这是我的代码：

$('#navbar li').click(function() {
  $(this).addClass('active').siblings('li').removeClass('active');
});

@import url(https://fonts.googleapis.com/css?family=Maven+Pro:400,900,700,500);
html{
  font-family: 'Maven Pro', sans-serif;
}
body{
  background:fixed
    url(images/bright_squares.png) #cccccc;
  position:relative;
  padding:0;
  margin:0;
}
#home {padding-top:50px;height:500px;color: #fff; background-image:url(images/random_grey_variations.png);}
#about {padding-top:50px;height:500px;color: #fff;}
#portfolio {padding-top:50px;height:500px;color: #fff;}
#contact {padding-top:50px;height:500px;color: #fff;}

background-dark{
  background:fixed
    url(images/random_grey_variations.png);	
}

#navbar {
  position:fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 60px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #222;
  font-family: 'Maven Pro', sans-serif;
  font-size: 18px;
  font-weight: 300;
}

#navbar li {
  position: relative;
  float: left;
  line-height: 60px;
  background: inherit;
  text-align: center;
  transition: all .2s;
}

#navbar li a {
  position: relative;
  display: block;
  padding: 0 20px;
  line-height: inherit;
  color: white;
  text-decoration: none;
}

#navbar li:before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  background: #222;
  border-radius: 50%;
  transform: rotate(45deg);
  transition: all 0, background .2s;
}
#navbar li:hover:before {
  margin-top: 1px;
  border-radius: 50% 50% 0 50%;
  transition: all .1s, background .2s, margin-top .2s cubic-bezier(.5,30,.2,0);
}
#navbar li:hover,
#navbar li:hover:before {
  background: #3a3a3a;
}
#navbar li.active,
#navbar li.active:before {
  background: steelblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul id="navbar">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#portfolio">Portfolio</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

<div id="home">
  <h1>Welcome</h1>
  <p>Test</p>
</div>

<div id="portfolio">
  <h1>portfolio</h1>
  <p>Test</p>
</div>

<div id="contact">
  <h1>contact</h1>
  <p>Test</p>
</div>

<div id="about">
  <h1>About Me</h1>
  <p>Test</p>
</div>

【问题讨论】：

您想要实现的究竟是什么？将箭头保留在蓝色部分的底部？

标签： javascript jquery html css

【解决方案1】：

我认为这可能会回答您的问题。只需将此代码添加到您已有的 click 函数中即可。

$($(this).children().attr('href')).addClass('selected').siblings('div').removeClass('selected');

您需要将主页链接更改为 #home 而不是 #though

【讨论】：

这是否是正确的格式
是的，就是这样。它将类添加到活动 div 中，因此您可以使用 scrollspy 或任何您想要移动到它的东西。
如果这对您有用，请将其标记为答案。谢谢：p

【解决方案2】：

如果您想放弃所有这些，这里有更快的版本。

<script>
    $('#navbar li').click(function() {
        $(this).addClass('active').siblings('li').removeClass('active');
        var x = $($(this).children().attr('href')).first().offset().top
        $('body').animate({
          scrollTop: x
        }, 2000);
    });
</script>

这将添加我认为您正在寻找的滚动动画。

【讨论】：