Jump menu with active class and smooth scroll

index.html

<link href='https://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'>

<nav class="navigation" id="mainNav">
			<a class="navigation__link" href="#1">Section 1</a>
			<a class="navigation__link" href="#2">Section 2</a>
			<a class="navigation__link" href="#3">Section 3</a>
			<a class="navigation__link" href="#4">Section 4</a>
				<a class="navigation__link" href="#5">Section 5</a>
				<a class="navigation__link" href="#6">Section 6</a>
				<a class="navigation__link" href="#7">Section 7</a>
</nav>

<div class="page-section hero" id="1">
			<h1>Smooth scroll, fixed jump menu with active class</h1>
</div>
<div class="page-section" id="2">
			<h1>Section Two</h1>
</div>
<div class="page-section" id="3">
			<h1>Section Three</h1>
</div>
<div class="page-section" id="4">
			<h1>Section Four</h1>
</div>
<div class="page-section" id="5">
			<h1>Section Five</h1>
</div>
<div class="page-section" id="6">
			<h1>Section Six</h1>
</div>
<div class="page-section" id="7">
			<h1>Section Seven</h1>
</div>

jump-menu-with-active-class-and-smooth-scroll.markdown

Jump menu with active class and smooth scroll

Smoooooooooth

A Pen by Elena Scherer on CodePen.

License.

script.js

$(document).ready(function() {
		$('a[href*=#]').bind('click', function(e) {
				e.preventDefault(); // prevent hard jump, the default behavior

				var target = $(this).attr("href"); // Set the target as variable

				// perform animated scrolling by getting top-position of target-element and set it as scroll target
				$('html, body').stop().animate({
						scrollTop: $(target).offset().top
				}, 600, function() {
						location.hash = target; //attach the hash (#jumptarget) to the pageurl
				});

				return false;
		});
});

$(window).scroll(function() {
		var scrollDistance = $(window).scrollTop();

		// Show/hide menu on scroll
		//if (scrollDistance >= 850) {
		//		$('nav').fadeIn("fast");
		//} else {
		//		$('nav').fadeOut("fast");
		//}
	
		// Assign active class to nav links while scolling
		$('.page-section').each(function(i) {
				if ($(this).position().top <= scrollDistance) {
						$('.navigation a.active').removeClass('active');
						$('.navigation a').eq(i).addClass('active');
				}
		});
}).scroll();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

* { 
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	transition: all .1s ease; 
}

html, body {
		height: 100%;
}

h1 { font-size: 64px; }

.page-section {
		height: 480px;
		width: 50%;
		margin-left: 35%;
		margin-top: 5%;
		padding: 3em;
    background: linear-gradient(45deg, #43cea2 10%, #185a9d 90%);
		color: white;
		box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.5);
}

.navigation {
  	position: fixed; 
		width: 30%;
		margin-left: 2%;
  	background-color: #999;
  	color: #fff;
	
  	&__link {
			display: block;
    	color: #ddd; 
    	text-decoration: none;
    	padding: 1em;
			font-weight: 400;
			
			&:hover {
				background-color: #aaa;
			}
		
		   &.active {
		   	color: white;
				 background-color: rgba(0,0,0,0.1);
		   }
  	}
}

@kartick14 how to highlight a particular section without passing ids like I ave nav links home, about and test

But in the body content, I have divs like home, about, mission, vision, and test, etc. But with the current code, the test in the nav link is highlighting when the scroll comes to mission div not to test div. Is this achievable?