Wie versetzt zu anchor in url springen
Eingetragen von rhodes (631)am 21.03.2015 - 17:11 Uhr in
Hallo zusammen,
ich habe eine Content Seite mit Artikel-Teasern. Jede Teaser Headline ist gleichzeitig an anchor. Ruft jetzt ein Seitenbesucher meinetwegen diesen Link auf:
/service/artikeluebersicht#a210 springt er sofort zur Headline des Artikel 210 und muss selber nicht scrollen.
Die Sache hat leider einen Schönheitsfehler. Die Seite hat einen sticky Header, d.h. wenn die Seite nach unten gescrollt wird bleibt das Menü als fixed Element stehen. Ruft jetzt jemand #a210 scrollt die Seite zwar richtig zum Anchor, das Menü liegt aber darüber. D.h. ich müsste jetzt einen Weg finden zum Anchor und dann noch 200px weiter zu scrollen. Wenn es ein Link zu einem Anchor innerhalb der Seite wäre, dann könnte ich es über Jquery machen. Das ist es aber leider nicht. Die Seite wird in der Regel mit dem Hash in der URL aufgerufen.
Hat jemand einen Tipp für mich?
Danke & Grüße
rhodes
- Anmelden oder Registrieren um Kommentare zu schreiben
Wie ist denn der Scrolling
am 22.03.2015 - 11:19 Uhr
Wie ist denn der Scrolling Header/ Fixed Header umgesetzt. Wenn dies per Javascript gesteuert wird, könntest du dem Body einfach eine weitere Klasse zuweisen - mithilfe dieser Klasse könntest du dann ein margin-top für die Headlines (bzw. deine Anchors) setzen.
Alternativ hierzu kannst du auch per Javascript/ jquery zum Anchor scrollen - Beispiel hier: http://jsfiddle.net/senff/4D3bH/3/
Müsstest hier nur schauen, welches Event du hier benötigst, da es ja hier keine Klick sondern nur einen geänderten Hash gibt - hashchange sollte da helfen.
http://stackoverflow.com/questions/3090478/jquery-hashchange-event
SteffenR
Danke, das
am 22.03.2015 - 12:27 Uhr
habe ich mir auch schon angesehen, aber ich bin mir nicht sicher, ob das so klappt wie ich will.
MIt JS zum Anchor scrollen klappt nicht, weil es sich ja um keinen internen Seitenlink handelt, der geklickt wird und ein Click Event auslösen könnte. Die Leute rufen eine URL mit Hash z.B. aus einem Twitter feed heraus auf. Und ist der zugehörige Link weiter unten auf der Seite klappt eben das Menü aus und überdeckt alles....
Eigentlich sollte hier der
am 22.03.2015 - 14:13 Uhr
Eigentlich sollte hier der Event hash changed greifen - hatte ich oben auch schon mal mit erwähnt.
Damit kannst du auf Änderungen am Location Hash - also genau dem Text nach der Raute - schauen und dann deine Seite entsprechend scrollen lassen.
SteffenR