Anchor Scrolling offset

Datum: 29. August 2021
Autor: Bastian
Kategorie: Code
code example

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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/**
* 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 });
}
}
}
}
/** * 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 }); } } } }
/**
* 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 });
      }
    }
  }

}