<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header> <nav> <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <div class="content"> <section id="home"class="scrollTo"></section> <section id="about"class="scrollTo"></section> <section id="services"class="scrollTo"></section> <section id="contact"class="scrollTo"></section> </div>

html, body { margin: 0; padding: 0; width: 100%; height: 100%;} header { position: fixed; top: 0; width: 100%; height: 80px; background: #fff; } ::-webkit-scrollbar { display: none; } nav { width: 960px; height: 80px; margin: 0 auto; } nav ul { margin: 20px 0 0; } nav ul li { display: inline-block; margin: 0 30px 0 0; } a { color: #4D4D4D; font-family: sans-serif; text-transform: uppercase; text-decoration: none; line-height: 42px; } .active { color: #2dbccb; } .content { width: 100%; height: 100%; } .content > section { width: 100%; height: 100%; } #home { background: #2dbccb; } #about { background: #f6c362; } #services { background-color: #eb7e7f; } #contact { background-color: #415c71; }

var scrolling = false; var currentPos = 0; function scrollUp(){ if(!scrolling && currentPos > 0 ){ scrolling=true; currentPos --; var scrollToElement = $('.scrollTo')[currentPos]; $('html, body').animate({ scrollTop: $(scrollToElement).offset().top }, 500, function(){ scrolling = false; }); } } function scrollDown(){ if(!scrolling && currentPos < $('.scrollTo').length-1 ){ scrolling=true; currentPos ++; var scrollToElement = $('.scrollTo')[currentPos]; $('html, body').animate({ scrollTop: $(scrollToElement).offset().top }, 500,function(){ scrolling = false; }); } } $(document).ready(function() { // Get the current position on load for( var i = 0; i < $('.scrollTo').length; i++){ var elm = $('.scrollTo')[i]; if( $(document).scrollTop() >= $(elm).offset().top ){ currentPos = i; } } $(document).bind('DOMMouseScroll', function(e){ if(e.originalEvent.detail > 0) { scrollDown(); }else { scrollUp(); } return false; }); $(document).bind('mousewheel', function(e){ if(e.originalEvent.wheelDelta < 0) { scrollDown(); }else { scrollUp(); } return false; }); });