Menu smoothscroll

Developer
Size
3,874 Kb
Views
20,240

How do I make an menu smoothscroll?

What is a menu smoothscroll? How do you make a menu smoothscroll? This script and codes were developed by Lisa Macken on 30 September 2022, Friday.

Menu smoothscroll Previews

Menu smoothscroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu smoothscroll</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body data-spy="scroll" data-target="#myScrollspy" class="">	<!-- Fixed Nav -->	<nav class="navbar navbar-default navbar-fixed-top" id="myScrollspy">	<div class="container">	<div class="navbar-header">	</div>	<div id="navbar">	<ul class="nav navbar-nav navbar-right">	<li><a href="#spydesingers">Home</a></li>	<li><a href="#spytop">Designers</a></li>	<li><a href="#spydevelopers">Developers</a></li>	</div>	</div>	</nav>	<!-- //Close Fixed Nav -->	<!-- Full Screen Landing Section -->	<section class="cover" id="spytop">	<div class="jumbotron">	<p>This example showing how you can use Flexbox in areas of a Bootstrap Download to enhance your layout!</p>	<p><em>This is and will always be a working progress so be sure to check back for updates!</em></p>	</div>	</section>	<!-- //Close Full Screen Landing Section -->	<!-- Section One; as seen on many site 3 main option sections for content -->	<section class="container-fluid section-one">	<div class="row">	<div class="col-md-4 section-one-content" id="section-one-left">	<h1>What</h1>	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.	</p>	<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.	</p>	</div>	<div class="col-md-4 section-one-content" id="section-one-middle">	<h1>Why</h1>	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.	</p>	<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.	</p>	</div>	<div class="col-md-4 section-one-content" id="section-one-right">	<h1>How</h1>	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.	</p>	<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.	</p>	</div>	</div>	</section>	<!-- //Close Section One -->	<!-- Section Two; a style feature I really like is 2 cols, 1 for text and 1 for a related image -->	<section class="container section-two" id="spydesingers">	<div class="row">	<div class="col-md-6 to-match">	<h2>Designers</h2>	<article>	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.	</p>	<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.	</p>	<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.	</p>	</article>	</div>	<div class="col-md-6 css-img-wrapper hidden-xs hidden-sm">	<img class="img-responsive img-circle img-designers">	</div>	</section>	<!--//Close Section Two -->	<!--// Section Three; the main reason I like this format is the increase in white space -->	<section class="container section-three" id="spydevelopers">	<div class="row">	<div class="col-md-6 css-img-wrapper hidden-xs hidden-sm">	<div class="img-circle img-responsive img-developers"></div>	</div>	<div class="col-md-6">	<h2>Developers</h2>	<article>	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.	</p>	<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.	</p>	<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.	</p>	</article>	</div>	</div>	</section>	<!--//Close Section Three -->
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Menu smoothscroll - Script Codes CSS Codes

/* Nav / Navbar Styles
===================================*/
.navbar {	background: transparent;	border-bottom: none;	padding: 30px 0 10px;	-webkit-transition-duration: 0.6s; transition-duration: 0.6s;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav>li>a {	color: #183532;
}
.navbar-default .navbar-nav>li {	margin-right: 8px;
}
.navbar-default .navbar-nav>li:last-of-type {	margin-right: 0;
}
.dropdown-menu,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {	background: rgba(24,53,50, 0.1);
}
.dropdown-menu {	padding: 8px;	box-shadow: none;	border: none;
}
.dropdown-menu li a {	padding: 4px 8px;	border-radius: 6px;
}
.nav-dropdown-scroll {	background: red;	box-shadow: 0px 10px 9px rgba(0, 0, 0, 0.4);
}
.navbar-toggle,
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {	background: #fff;
}
/* jQuery Styles
===================================*/
.navbar-scroll {	background: #ffffff;	padding: 0;	box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4);	-webkit-transition-duration: 0.6s; transition-duration: 0.6s;
}

Menu smoothscroll - Script Codes JS Codes

$(window).resize(function() { //update stuff
});
//Change pos/background/padding/add shadow on nav when scroll event happens
$(function(){	var navbar = $('.navbar');	var navDropdown = $('.dropdown-menu');	$(window).scroll(function(){	if($(window).scrollTop() <= 40){	navbar.removeClass('navbar-scroll');	navDropdown.removeClass('nav-dropdown-scroll');	$('.top').hide();	} else {	navbar.addClass('navbar-scroll');	navDropdown.addClass('nav-dropdown-scroll');	$('.top').show();	}	});	$('.navbar-toggle').click(function(){	if($(window).scrollTop() <= 40){ navbar.addClass('navbar-scroll'); }	});
});
//Smooth Scrolling For Internal Page Links
$(function() { $('a[href*=#]:not([href=#])').click(function() {	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) {	$('html,body').animate({ scrollTop: target.offset().top	}, 1000);	return false; }	} });
});
Menu smoothscroll - Script Codes
Menu smoothscroll - Script Codes
Home Page Home
Developer Lisa Macken
Username lmack90
Uploaded September 30, 2022
Rating 3
Size 3,874 Kb
Views 20,240
Do you need developer help for Menu smoothscroll?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lisa Macken (lmack90) Script Codes
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!