var from = $("#header").height(); $(document).ready(function () { $(".link:first").css("top", from + 'px'); }); $(".jumper").on("click", function (e) { e.preventDefault(); $("body, html").animate({ scrollTop: $($(this).attr('href')).offset().top - from }); });
<div id="header"> <nav id="navigation"> <ul> <li><a class="jumper" href="#section1">section1</a> </li> <li><a class="jumper" href="#section2">section2</a> </li> <li><a class="jumper" href="#section3">section3</a> </li> </ul> </nav> </div> <div id="body"></div> <div class="link" id="section1">This is section 1 page. here you can place your section 1 contents</div> <div class="link" id="section2">This is section 2 page. here you can place your section 2 contents</div> <div class="link" id="section3">This is section 3 page. here you can place your section 3 contents</div>
#header { position: fixed; left:0; top:0; width:100%; height:15%; background-color: azure; z-index:500; } #section1 { top:15%; background-color:blue; } #section2 { top:65%; background-color:red; } #section3 { top:115%; background-color:green; } body { background-color:pink; } .link { position:relative; left:10%; display:list-item; width:80%; min-height:500px; height:auto; list-style-type: none; } ul li { position: relative; display: inline; margin: 0 10px 0 0; } .jumper { background: #0f84e8; /* Show a solid color for older browsers */ color: #eee; padding: 0 20px 0 20px; text-decoration: none; } .jumper:hover, #navigation a:focus { background: #efefef; color: #373737; } #navigation { margin-left:20%; }