Как сделать отступ при прокрутке к якорю?

Question

[prrrrrrr]

Подскажите, есть JS код который подсвечивает ссылки в навигации при активной секции, а также стоит плавная прокрутка к якорю, работает всё нормально, вот только когда кликаем на ссылку, то прокрутка происходит в точности к привязанной секции, но вот момент, фиксированное меню налазит на заголовок. Как можно исправить ситуацию, чтобы меню не налазило, то есть отправлять чуть выше?

Код

var menu_selector = ".landing-menu";
 
function onScroll(){
    var scroll_top = $(document).scrollTop();
    $(menu_selector + " a").each(function(){
        var hash = $(this).attr("href");
        var target = $(hash);
        if (target.position().top <= scroll_top && target.position().top + target.outerHeight() > scroll_top) {
            $(menu_selector + " a.active").removeClass("active");
            $(this).addClass("active");
        } else {
            $(this).removeClass("active");
        }
    });
}
 
$(document).ready(function () {
 
    $(document).on("scroll", onScroll);
 
    $("a[href^=#]").click(function(e){
        e.preventDefault();
 
        $(document).off("scroll");
        $(menu_selector + " a.active").removeClass("active");
        $(this).addClass("active");
        var hash = $(this).attr("href");
        var target = $(hash);
 
        $("html, body").animate({
            scrollTop: target.offset().top
        }, 900, function(){
            $(document).on("scroll", onScroll);
        });
 
    });
 
});

Comments

[Алексей]

Отнять от офсета высоту меню что бы скролил не до секции, а чуть выше?

[prrrrrrr]

Алексей, возможно. поэтому и спрашиваю. js плохо знаю, точнее вообще не знаю, только копи-паст. пример скинете?

Answer 1

[hzzzzl]

$("html, body").animate({
  scrollTop: target.offset().top - 150 // или на сколько пикселей выше надо
}, 900, function(){
  $(document).on("scroll", onScroll);
});

Comments

[NewUser4242]

А что если пишет "target is not defined"

Answer 2

[Galdar Turin]

var paddingtop = 200;// отступ сверху при прокрутке

  $('body').delegate('#spgo', 'click', function(){
    $('body,html').animate({scrollTop: $('span.highlight:first').offset().top-paddingtop}, scrollspeed); 
  });

Comments

[prrrrrrr]

Не срабатывает

var paddingtop = 200;
        $("html, body").animate({
...

[Galdar Turin]

prrrrrrr, вот переменная paddingtop, а вот свойство .top-paddingtop
можешь написать так
$('body').delegate('#spgo', 'click', function(){
$('body,html').top-200});
});
200 - это пикселей