jQuery Scrolling Menu

Scrolling menu bar over the page scroll will increase menu usability. It helps user to reach menu area easily. In 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 up on the page scroll.

<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>

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 id="feature-content">
		<h1>Features</h1>- Features - Content -
	<div id="version-content">
		<h1>Versions</h1>- Versions - Content -
	<div id="change-log-content">
		<h1>Change Log</h1>- Change Log - Content -
	<div id="download-content">
		<h1>Download</h1>- Download - Content -

And the CSS is,

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;}

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 scrollTop property with the jQuery animate() function.

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

View DemoDownload

This jQuery code tutorial was published on June 11, 2015.

↑ Back to Top