Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Navigation Menu | May 23, 2022

Today in this blog you’ll learn how to create Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Video tutorial of create Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

This tutorial video can help you to create Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

create Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery [Source Codes]

This source code can help you to create create Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<header>
	<h1>Header</h1>
</header>
<div class="header-height"></div>

<div class="container">
	<h2>Content</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<section class="tabs_nav">
	<div class="container">
		<ul>
			<li><a href="javascript:void(0)">HTML</a></li>
			<li><a href="javascript:void(0)">CSS</a></li>
			<li><a href="javascript:void(0)">JavaScript</a></li>
			<li><a href="javascript:void(0)">Python</a></li>
			<li><a href="javascript:void(0)">JAVA</a></li>
		</ul>
	</div>
</section>
<div class="tabs_nav_height"></div>

<div class="container">
	<div class="scroll_section">
		<h2>What is HTML ?</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
	<div class="scroll_section">
		<h2>What is CSS ?</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
	<div class="scroll_section">
		<h2>What is JavaScript ?</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
	<div class="scroll_section">
		<h2>What is Python ?</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
	<div class="scroll_section">
		<h2>What is JAVA ?</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 20px;
	margin: 0;
	background: #0f4dff;
	background: #003ce9;
	background: #0276ad;
	background: #fff;
	color: #222;
}

header{
	background: #003046;
	padding: 15px;
	text-align: center;
	color: #fff;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
}
.container{
	max-width: 1000px;
	margin: 0 auto;
}

.tabs_nav{
	background: #0572a5;
}
.tabs_nav.fixed{
	position: fixed;
	left: 0;
	width: 100%;
	z-index: 1000
}
.tabs_nav ul{
	padding: 0;
	margin: 0;
	list-style: none;
}
.tabs_nav ul li{
	display: inline-block;
}
.tabs_nav ul li a{
	color: #fff;
	text-transform: uppercase;
	padding: 15px;
	display: block;
	text-decoration: none;
	font-size: 17px;
	transition: all 0.3s ease-in-out; 
}
.tabs_nav ul li:hover a,.tabs_nav ul li.active a{
	background: #fff;
	color: #0572a5;
}

.scroll_section{
	padding: 30px 0
}

JavaScript Code

Copy

var headerHeight = $('header').outerHeight(),
tabs_nav_offset_top = $('.tabs_nav').offset().top,
tabs_nav_height = $('.tabs_nav').outerHeight();
$('.header-height').css({"height":headerHeight})


$(window).scroll(function(){
	if($(window).scrollTop() > tabs_nav_offset_top){
    $('.tabs_nav').addClass('fixed')
    $('.tabs_nav').css({"top":headerHeight });
    $('.tabs_nav_height').css({"height":tabs_nav_height });
  }else{
  	$('.tabs_nav').removeClass('fixed')
    $('.tabs_nav').css({"top":0 });
    $('.tabs_nav_height').css({"height":0 });
  }

  $(".scroll_section").each(function(){
    if($(window).scrollTop() > $(this).offset().top - headerHeight - tabs_nav_height - 5){
      $(".scroll_section").removeClass("selected");
      $(this).addClass("selected");
      thisIndex = $(this).addClass("selected").index();
      
      $('.tabs_nav ul li').removeClass('active');
      
      $('.tabs_nav ul li').eq(thisIndex).addClass('active')
    }
  })
})

$('.tabs_nav ul li').click(function(event) {
  var triggerIndex = $(this).index()
  triggerIndexOffset = $(".scroll_section").eq(triggerIndex).offset().top;   
  
  $('.tabs_nav ul li').removeClass('active');
  $(this).addClass('active');
  $('html, body').animate({scrollTop:triggerIndexOffset - headerHeight - tabs_nav_height});
  
 
});

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Video tutorial of create Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

You might like this

create Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery [Source Codes]

Create Mobile Friendly Navigation Bar Using HTML CSS and JavaScript | Create Responsive Menu Bar

Responsive Navigation Bar With Multilabel Dropdown using Only HTML & CSS | Dropdown Menu CSS

Single Page Smooth Scrolling Navigation Menu using HTML and CSS

Sidebar Navigation Menu with jQuery | Responsive Menu bar using HTML CSS and jQuery

Create Responsive Mobile Menu using Only HTML CSS | Responsive Navigation Slide Using CSS

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery