Menu smoothscroll
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 - 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; } } });
});
Developer | Lisa Macken |
Username | lmack90 |
Uploaded | September 30, 2022 |
Rating | 3 |
Size | 3,874 Kb |
Views | 20,240 |
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!
Name | Size |
CodeCamp - Front-End Challenge | 2,107 Kb |
Carousel | 2,620 Kb |
SVG icons | 3,809 Kb |
SmoothScroll Navigation 2 | 2,888 Kb |
Animation examples | 1,850 Kb |
Image moves with mouse | 1,974 Kb |
Columns everywhere | 1,761 Kb |
A Pen by Lisa Macken | 2,231 Kb |
Scrollable svg Animations | 2,980 Kb |
Simple Quiz | 2,847 Kb |
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!
Name | Username | Size |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
Week7 replicate | Hwcasis | 1,620 Kb |
Angular Route | Arun_v606 | 1,837 Kb |
Cofee and sugar | Tripack | 2,094 Kb |
Dribbble Template | ExtremelyGinger | 2,204 Kb |
A Pen by Stan Williams | Stanssongs | 6,706 Kb |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!