Выделите анкер

Question

Код:

function scroll_page(){ 

     var target = document.location.hash.replace("#",""); 
     var selector = 'div[id='+target+']'; 
     alert(selector); 
     $('html,body').animate({scrollTop: $(selector).offset().top -60}, 2000); 
     return false; 
    }; 

Сode называется здесь:

$(window).on('hashchange', function() { 
    scroll_page(); 
    }); 

Проблема заключается в том, что при нажатии на ссылке резко подскакивает к этому DIV, а затем осторожно подъезжает к его верх.

Answer 1

Попробуйте следующий код,

$(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 - 140 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

Answer 2

Если у вас есть якорь в вашей ссылке, как <a href='#id'>, то она будет срабатывать до вашего JavaScript. hashchange Событие происходит после прокрутки к якорю.

Чтобы предотвратить это, вам необходимо привязать событие click и предотвратить поведение по умолчанию.

Я бы сделал что-то вроде этого.

HTML:

<a class="slow-scroll" href="#first">First</a> 
<a class="slow-scroll" href="#second">First</a> 
<a class="slow-scroll" href="#third">First</a> 

JS:

$(".slow-scroll").on('click', function(e) { 
    var target = $(this).attr("href").substr(1); 
    var selector = 'div[id='+target+']'; 
    alert(selector); 
    $('html,body').animate({scrollTop: $(selector).offset().top -60}, 2000); 
    e.preventDefault(); 
    return false; 
}); 

Вот JSFiddle Demo.