Как сделать скролл к якорю с отступом вверх на jQuery?

Question

[Максим Вакаев]

Как сделать плавный скролл к якорям и чтобы отступ вверх был 100px? Грубо говоря есть фиксированный header и чтобы он не закрывал заголовки при прокрутке на них нужно сделать чтобы при скролле учитывался отступ в 100px вверх.

Answer 1

[Andrey Vasilev]

$(function(){

$('.some_link').on('click', function(e){
  $('html,body').stop().animate({ scrollTop: $('#some_point').offset().top-100 }, 1000);
  e.preventDefault();
});

});

Comments

[Максим Вакаев]

Спасибо!

Answer 2

[Игорь]

в идеале высоту этого хедера тоже высчитывать фактическую, а не статично писать, так как высота его может меняться в зависимости от адаптива
подправлю немного код Andrey Vasilev

$(function(){

$('.some_link').on('click', function(e){
  $heightHeader = $('header').height();
  $('html,body').stop().animate({
      scrollTop: $('#some_point').offset().top - $heightHeader 
  }, 1000);
  e.preventDefault();
});

});

Comments

[Максим Вакаев]

Да, всё верно, но в моем случае хедэр одинаковой высоты на всех разрешениях, так что можно и статичную указать. А так да, ваш код более правильный) у меня получилось так

$('a[href*="#"]').click(function (e) {
    $('html, body').stop().animate({
      scrollTop: $(this.hash).offset().top-100
    }, 1000);
    e.preventDefault();
  })

[Andrey Vasilev]

конечно лучше закидывать и высчитывать, тут главное что принцип понятен.

[Максим Вакаев]

Andrey Vasilev, согласен) главное понять, а дальше модернизируй как хочешь

[Игорь]

Максим Вакаев, пушка)