Navbar with scrollspy

HTML, CSS, JS - Draft

by Ovi Stof

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="htmlcss bootstrap menu, scrollspy, navbar scroll, menu CSS examples" />
<meta name="description" content="Bootstrap 5 navbar link on click go to section with id, with smooth scroll animation effect, html css source code" />  

<title>Demo - Bootstrap 5 fixed top navbar menu. html code example</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"crossorigin="anonymous"></script>

<script type="text/javascript">
	document.addEventListener("DOMContentLoaded", function(){
		
		var scrollSpy = new bootstrap.ScrollSpy(document.body, {
		  target: '#main_nav',
		})

		// add smooth animated scroll via javascript
		document.querySelectorAll('.scrollto').forEach(function(element){
			element.addEventListener('click', function(e) {
				e.preventDefault();
				var section_name = element.getAttribute('href');
				var offset_num = document.querySelector(section_name).offsetTop;
			  	window.scrollTo({ top:(offset_num - 0), behavior:'smooth' });
			});
		})

	}); 
	// DOMContentLoaded  end
</script>

<style type="text/css">
	body{ position: relative; }
	.nav-dots{
		position: fixed; top:40%; right:10px;
		width:100px; 
	}
	.nav-dots .nav-link{ 
		display: block; 
		background: #eee; 
		border-radius: 30px; 
		margin-bottom: 5px; 
	}
	.nav-dots .nav-link.active{ background:blue; color:white; }
</style>
</head>
<body>


<ul id="main_nav" class="nav nav-dots">
	<a class="nav-link scrollto" href="#section_1"> One </a>
	<a class="nav-link scrollto" href="#section_2"> Two </a>
	<a class="nav-link scrollto" href="#section_3"> Three </a>
	<a class="nav-link scrollto" href="#section_4"> Four </a>
</ul>


<div class="container"...