javascript - Scrolling to anchor and make nav fixed -

i'm trying make nav anchor links fixed when scrolling anchor. making things fixed scroll anchor not problem.

the problem nav on bottom of screen. happens if scroll down nav gets fixed class. when clicking anchor link script scrolls far anchor block. tried offsetting nav height of navigation. works when click second time on same link. first time clicking anchor link still makes link scroll far!

i created fiddle explain happens -> fiddle

i think scrollto , making nav fixed @ same time interfering each other.

does know can cause this?

what have this:

<div class="anchor-links">     <div class="anchor-wrapper">         <ul class="nav-list">             <li><a href="#description" class="gosmoothly">product information</a></li>             <li><a href="#bundles" class="gosmoothly">product bundles</a></li>             <li><a href="#reviews" class="gosmoothly">reviews</a></li>             <li><a href="#related" class="gosmoothly">related products</a></li>         </ul>     </div> </div>  <div id="description" class="block">description</div> <div id="bundles" class="block">bundles</div> <div id="reviews" class="block">reviews</div> <div id="related" class="block">related</div>  var fixmetop = $('.anchor-links').offset().top;  $(window).scroll(function() {     var currentscroll = $(window).scrolltop();     if (currentscroll >= fixmetop){         $('.anchor-links').addclass("sticky");     } else {         $('.anchor-links').removeclass("sticky");     } });  $('.gosmoothly').click(function(event){          event.preventdefault();     $(this).addclass('active');     $('html,body').animate({         scrolltop: $(this.hash).offset().top - 100     }, 500); }); 

this seems work: jsfiddle.

html:

<div class="anchor-links">     <div class="anchor-wrapper">         <ul class="nav-list">             <li><a href="#description" class="gosmoothly">product information</a></li>             <li><a href="#bundles" class="gosmoothly">product bundles</a></li>             <li><a href="#reviews" class="gosmoothly">reviews</a></li>             <li><a href="#related" class="gosmoothly">related products</a></li>         </ul>     </div> </div> <div class="container"> <div id="description" class="block">description</div> <div id="bundles" class="block">bundles</div> <div id="reviews" class="block">reviews</div> <div id="related" class="block">related</div> </div> 

css:

.container {     margin-top: 100px; } .block{     height:700px;     background:#eee; } .anchor-links {   border-bottom: 1px solid #f5f5f5;   border-top: 1px solid #f5f5f5;   margin-bottom: 20px;   position: fixed;   top:0;   left: 0;   background: #fff;   width: 100%; } .anchor-links .nav-list li {   display: inline-block;   line-height: 4.2rem; } .anchor-links.sticky {   background: #fff none repeat scroll 0 0;   border-bottom: 1px solid #f5f5f5;   left: 0;   position: fixed;   top: 0;   width: 100%;   z-index: 99; }