Якорный тег на странице прокрутки до JavaScript, чтобы приземлиться чуть выше элемента назначения

Question

У меня немного неприятная проблема, когда у меня есть фиксированный заголовок на свитке, высота которого 60px. Я использую приведенный ниже код, чтобы при нажатии <a href="#some-section"> он перемещался к <div id="some-section">. Это прекрасно работает.

Однако, если активирован фиксированный заголовок, это означает, что верхние 60 пикселей <div> обрезаны.

Я пытаюсь отредактировать приведенный ниже JavaScript, чтобы прокрутитьво всех случаях на сайте на 60px выше, чем вершина идентификатора соответствующего элемента.

Возможно ли это вообще? Я предполагаю, что это как-то связано со смещением, но, похоже, не могу это прибить. Любая помощь с благодарностью как никогда!

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

Answer 1

Вам просто нужно удалить 60px из offset().top целевого элемента, чтобы оставить место для фиксированного заголовка:

scrollTop: target.offset().top - 60

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

scrollTop: target.offset().top - $('#fixedHeader').height()