jQuery Scrolling Menu

by Vincy. Last modified on July 12th, 2022.

Scrolling menu bar over the page scroll will increase menu usability. It helps a user to reach menu area easily. In a previous tutorial, we have seen about how to scroll a floating contact form.

In this example, we are having a fixed positioned scrolling menu. While navigating through this menu we have added jQuery effect to scroll page smoothly.

View Demo

Scrolling Menu HTML

This HTML code is used to show the scrolling menu. We have given fixed position to this menu HTML to display depending upon the page scroll.

jquery-scrolling-menu

<div id="scrolling-menu">
    <div id="intro">Introduction</div>
    <div id="feature">Features</div>
	<div id="version">Versions</div>
	<div id="change-log">Change Log</div>
	<div id="download">Download</div>
</div>

This is the content area in which the jQuery smooth scrolling is applied on menu navigation.

<div id="scroll-content">
	<div id="intro-content">
		<h1>Introduction</h1>- Introduction - Content -
	</div>
	<div id="feature-content">
		<h1>Features</h1>- Features - Content -
	</div>
	<div id="version-content">
		<h1>Versions</h1>- Versions - Content -
	</div>
	<div id="change-log-content">
		<h1>Change Log</h1>- Change Log - Content -
	</div>
	<div id="download-content">
		<h1>Download</h1>- Download - Content -
	</div>
</div>

And the CSS is,

<style>
body{width:500px;margin:10 auto 60px;}
#scrolling-menu{position: fixed;width: 150px;margin-top:10px;}
#scrolling-menu div{padding:10px;margin-bottom:1px;background: #C7B3B3;color: #F0F0F0;cursor:pointer;}
#scroll-content{border-left:#CCC 4px solid;margin-left:150px;padding-left:60px;color:#E0403A;}
#scroll-content div{margin-bottom: 60px;}
</style>

jQuery Smooth Scrolling Effect

This jQuery script is used to scroll page depends on the target DIV’s top position. This is done by setting the scrollTop property with the jQuery animate() function.

<script>
	$(document).ready(function (){
		$('#scrolling-menu div').click(function() { 
			var target = $(this).attr('id');
			$('html, body').animate({scrollTop: $('#'+target+'-content').offset().top}, 1000);
		});     
	});
</script>

View DemoDownload

Vincy
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *

↑ Back to Top

Share this page