Anchor Scrolling offset

Damit der eigentliche Anker nicht unter den Header rutscht Die Variable „mainMenu“ muss mit der Höhe des Headers gesetzt werden. Dafür müssen die Klassen an die Struktur deiner Seite angepasst werden.

/**
* Anchor Links to scroll correct (no overlaying header)
*/

function anchorControll ($) {
  //on page load
  if ( document.location.hash != '' && jQuery(document.location.hash).length > 0) {
    var mainMenu = $('.masthead > .header-bar ').height();
    if ( $(document.location.hash).offset().top >= 200) {
      scrollToPos(document.location.hash, mainMenu);
    } else {
      scrollToPos(document.location.hash, 0);
    }
  }

  //on click anchor same page
  $('a[href*=\\#]').on('click', function (event) {
    if ( this.hash != '' ) {
      if( this.hostname === window.location.hostname && this.pathname === window.location.pathname ) {
        event.preventDefault();
        var mainMenu = $('.masthead > .header-bar ').height();
        var hash = this.hash;
        if (!$(this.hash).is(":visible") ){
          hash = this.hash + 'Mobil';
        }
        if ( $(this).hasClass('scroll-top')) { //scrollTop Button has href="#"
          scrollToPos('body', mainMenu);
        }else if ( $(this).hasClass('dt-mobile-menu-icon') ) {
          scrollToPos(hash, mainMenu);
        } else {
          scrollToPos(hash, mainMenu);
        }
        if( $('#page').hasClass('show-mobile-header') ){
          $('.dt-close-mobile-menu-icon').trigger('click');
        }
      }
    }
  });

  function scrollToPos (hash, offsetValue) {
    if (jQuery(hash).length > 0) {
      if (hash == ''){
        jQuery('html, body').animate({ scrollTop : $(hash).offset().top - offsetValue });
      }else {
        jQuery('html, body').animate({ scrollTop : $(hash).offset().top - offsetValue });
      }
    }
  }

}