How to Smooth Scrolling Navigation With jQuery in 3 easy steps

Wednesday 23th, Dec, 2015 | #HTML 5 #Animation #Menus

Demo

Smooth Scrolling is a technique which reduces the sudden jumps in display while scrolling. The content will appear to seamlessly flow in and out of the screen as you scroll. Many browsers ship with it, but it can also be implemented by websites.

Step1 - Html

 <html>
<body>
<head>
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='main.js'></script>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
    <nav>
        <ul>
            <li><a class="nav" href="#page1">1</a></li>
            <li><a class="nav" href="#page2">2</a></li>
            <li><a class="nav" href="#page3">3</a></li>
            <li><a class="nav" href="#page4">4</a></li>
            <li><a class="nav" href="#page5">5</a></li>
        </ul>
    </nav>
    
    <section id="page1"></section>
    <section id="page2"></section>
    <section id="page3"></section>
    <section id="page4"></section>
    <section id="page5"></section>
</body>
</html>

Step2 - main.css


nav{
	position:relative;
}

ul{
	background-color:#666;
	position: fixed;
	top: 50%;
	left: 10px;
	transform: translate(0%, -50%);
	border-radius: 55px;
	padding:20px;
}

li.active{
	background-color:#ccc;		
}

li {
	list-style:none;
	background-color:#f1f1f1;
	border-radius: 100px;
	width:20px;
	height:20px;
	margin-bottom:10px;
	position:relative;
		
}
li a{
	text-decoration:none;
	position:absolute;
	color:#000;
	top: 50%;
	left: 50%;
	padding:10px;
	transform: translate(-50%, -50%);
	
}

li:last-child {
	margin-bottom:0px;
}

header {
	position:absolute;	
}

section{
	width:100%;
	height:100%;
}
#page1{
	background-color:#4a7c59;	
}

#page2{
	background-color:#68b0ab;
}

#page3{
	background-color:#8fc0a9;
}

#page4{
	background-color:#c8d5b9;
}

#page5{
	background-color:#faf3dd;
}

Step3 - main.js


$(function() {
	$('.nav').click(function(){
		$('li').removeClass("active");	
		var link = $(this).attr('href');
		$(this).parent().addClass("active");
		var posi = $(link).offset().top;
		$('body,html').animate({scrollTop:posi},700);
	})
});