плавная прокрутка навигации с активным классом

Question

Я работаю над плавной навигационной панелью прокрутки для веб-сайта. Мне удалось заставить панель навигации прокручиваться до разных разделов в документе 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); \t 
 
} 
 

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

Answer 1

Я думаю, что это может ответить на ваш вопрос. Просто добавьте этот код в уже имеющуюся функцию кликов.

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

Вам нужно будет изменить ссылку на домашний #home вместо # хотя

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

Это добавит анимацию прокрутки, которую, я думаю, вы ищете.