具有活动类的平滑滚动导航

smooth scroll navigation with active class

本文关键字：平滑 滚动 导航 活动      更新时间：2023-09-26

我一直在为一个网站开发平滑滚动导航栏。我已经设法使导航栏滚动到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>

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

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

您需要通过

将主页链接更改为#home而不是#

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

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

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

相关文章：