Zur Navigation

Link soll URL nicht ändern

1 Isa (Gast)

Hallo Jörg,
ich habe in der Navigation einer Seite ein paar Links, die zu anderen Stellen auf dieser Seite führen, aber ich möchte nicht, dass ich dadurch die URL ändert.
Habe dazu diesen Artikel gefunden:
http://stackoverflow.com/questions/20215248/prevent-href-link-from-changing-the-url-hash
meine beiden Versuche funktionieren leider überhaupt nicht. Siehe hier:
http://dauten.server29.vorschauseite.eu/Ohne/
http://dauten.server29.vorschauseite.eu/Ohne/2.html
könntest du mir bitte mitteilen, wo der Fehler liegt?
Vielen Dank schon mal!

03.03.2017 10:23

2 Jörg Kruse

Naja, die Lösung funktioniert auch auf deinen Testseiten: das preventDefault(); verhindert den Sprung zum Anker. Der Fragesteller in dem stackoverflow.com Thread wollte eine JavaScript-Funktion ausführen ohne Sprung zum Anker "#" Du möchtest dagegen schon zum Anker springen, aber ohne dass sich die URL ändert. Dazu finden sich eher hier Lösungen, wie der Browser alternativ zum Anker scrollt:

http://stackoverflow.com/questions/15223006/scroll-with-anchor-without-in-url

... wobei auch hier das preventDefault() zum Einsatz kommen muss, damit der Browser nicht noch zusätzlich springt :)

03.03.2017 12:18 | geändert: 03.03.2017 12:19

3 Isa (Gast)

Danke für deine Antwort, Jörg!

Habe mich daran versucht und in mein Beispiel das folgende eingebaut, aber das funktioniert nicht
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function goToByScroll(id){
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
</script>
<script>
$('.nix').click(function(event){
    event.preventDefault();
});
</script>
auch das hier funktioniert nicht
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
document.getElementById('m').scrollIntoView(true);
</script>
<script>
$('.nix').click(function(event){
    event.preventDefault();
});
</script>
natürlich habe ich keinen Plan, wie JavaSkript funktioniert.
Und eigentlich möchte ich es ja so haben, dass bei jedem Anker-Link zwar an die entsprechende Textstelle gesprungen wird, aber die URL nicht geändert wird. Oder funktioniert das nicht wie ich das haben möchte?

03.03.2017 13:51

4 Jörg Kruse

Probier mal so:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.nix').click(function(event) {
        event.preventDefault();
        var scrollTarget = $($(event.target).attr('href'));
        $('html, body').animate({
            scrollTop: scrollTarget.offset().top
        }, 'slow');
    });
});
</script>

Den Code kannst du in den Headbereich packen - er wird erst ausgeführt, wenn das Dokument geladen ist ($(document).ready(...))

Das Linkziel (scrollTarget) wird hierbei einfach aus dem href Attribut des angeklickten Links ausgelesen

03.03.2017 14:27

5 Isa (Gast)

Hallo Jörg, vielen Dank für diesen Code! Funktioniert genau so, wie ich es haben wollte! Vielen vielen Dank dafür! Dir noch ein schönes Wochenende!

05.03.2017 13:10

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]