#Anker Problem

[ullihantke]

Hallo,
ich habe auf einer Singlepage Anker gesetzt. Jetzt habe ich aber folgendes Problem.

Ich habe einen festen header und wenn ich den Anker setzte, dann verschwindet der Anfang unter dem festen header... wenn ich den Anker ab an andere Stelle setzt passt es nicht. Kann mir jemanden helfen?

Anbei mein Anker
<h3 id="about"></h3>

Ich nutze dieses script damit es automatisch scrollt

<!-- jQuery Code -->
<script type="text/javascript">

$(document).ready(function() {
// Alle internen Links auswählen
$('a[href*=#]').bind("click", function(event) {
// Standard Verhalten unterdrücken
event.preventDefault();
// Linkziel in Variable schreiben
var ziel = $(this).attr("href");
//Scrollen der Seite animieren, body benötigt für Safari
$('html,body').animate({
//Zum Ziel scrollen (Variable)
scrollTop: $(ziel).offset().top
// Dauer der Animation und Callbackfunktion die nach der Animation aufgerufen wird, sie stellt das Standardverhalten wieder her und ergänzt die URL
}, 1000 , function (){location.hash = ziel;});
});
return false;
});
</script>

 

[MyBad]

Hi! Das ist doch klar. Die Seite springt immer bis zum Anker. Dieser orientiert sich an der Höhe des Viewports. Der Inhalt des Sprungziels muss also noch etwas Luft nach oben (min. Höhe des Headers) bekommen.

Ein Margin könnte hier also schon Abhilfe schaffen.

Der Tipp ist jetzt einfach mal ins Blaue geraten (schwierig ohne dein Markup und CSS zu kennen), aber vielleicht ja ein Treffer

 

[hub]

Moin moin,
für den Browser ist das eine Anweisung dorthin zu springen und erfolgt nach deiner Animation:

{location.hash = ziel;}

Du kannst dieses Verhalten umgehen, in dem du nach der Animation

1. im href deines Ankers die Adresse änderst, so das sie vom Browser nicht gefunden werden kann,
   
2. dann den Hash setzt (location.hash = ziel
   
3. und danach wieder die richtige Adresse in href einträgst

Gruß Ulli

 

[DieWaldfee]

hi, ich hoffe ich habe es nicht falsch verstanden, es ist mein erstes posting hier, also bitte ich um etwas nachsicht.

// fixe höhe
scrollTop: $(ziel).offset({top: 100}).top

// variable höhe
var navHeight = $('nav').height();
scrollTop: $(ziel).offset({top: navHeight});

lg.