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.
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.
<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>
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.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.