Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „#Anker Problem“

ullihantke

B2B Design e.K.

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

localhorst

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

nicht ganz neu hier

Moin moin,
für den Browser ist das eine Anweisung dorthin zu springen und erfolgt nach deiner Animation:
Javascript:
{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
 
D

DieWaldfee

Guest

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.
 
Zuletzt bearbeitet von einem Moderator:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.224
Neuestes Mitglied
Aliyah79
Oben