HTML Anker | höhe anpassen und oder scrollen (parallax effekt)

HTML Anker haben für mich meistens das Problem, dass eine Stelle über dem Anker angesteuert werden soll (wo man ihn aber nicht immer setzen kann). Um das zu umgehen kann das Anker-Element via CSS verschoben werden.

1. Anker ID und Klasse (zum verschieben des Elements)

<a class="anchorPos" id="anker1"></a>

1.1 Zugehöriger CSS Code

a.anchorPos {
    display: block;
    position: relative;
    top: -250px;  //Die Verschiebung in Pixel
    visibility: hidden;
}

2. jQuery um einen Scrolleffekt (Parallax) zu bekommen. Den Code von Punkt 1 und 1.1 benötigt man nur wenn die Ankerlinks auf andere Seite als die mit dem Ankerlink verweisen sollen. Wenn man den Code von Punkt 1 nutzt, kann man target.offset auch auf 0 setzen.

(für joomla).

Für andere Systeme kann jQuery auch mit $ ersetzt werden.

//parallax effekt, anker scrolling
/*
              jQuery(function() {
                jQuery('a[href*="#"]:not([href="#"])').click(function() {
                  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                    var target = jQuery(this.hash);
                    target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
                    if (target.length) {
                      jQuery('html, body').animate({
                        scrollTop: target.offset().top -170 //pixel to scroll above the anchor
                      }, 1100); //scrolling speed
                      return false;
                    }
                  }
                });
              });

Quellen:

https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header