Keine IDs werden an URL angefügt

[AzRaIL]

Moin,

Habe seit einigen Tagen ein smooth-scroll script drin zum animierten Ankerscrollen. Irgendwie werden die IDs durch das Script aus der URL entfernt.
Wenn ich es rausnehme werden die IDs wieder angefügt. Blicke aber nicht wirklich durch welcher Teil des Scripts dies verursacht.

Script:

jQuery(document).ready(function(){
    jQuery("div#content a[href^='#']").click(function(event){
        var target = this.hash.replace('#','');
         event.preventDefault();
         var dest=0;
         if (jQuery('div#content a[id="'+target+'"]').length > 0) {
            if (jQuery('div#content a[id="'+target+'"]').offset().top > jQuery(document).height()-jQuery(window).height()){
                dest = jQuery(document).height()-jQuery(window).height();
            }
            else {
                dest = jQuery('div#content a[id="'+target+'"]').offset().top;
            }   
        }
         jQuery('html,body').animate({scrollTop:dest}, 500,'swing');
    });
});

Erkennt ihr woran es liegt dass die IDs aus der URL entfernt werden?

Noch eine weitere Sache wäre wenn ich das Script rausnehme werden IDs ja wieder angefügt. Jedoch habe ich eine Navigation die zu Ankern scrollen soll. Diese funktioniert dann gar nicht mehr, es wird weder gesprungen noch wird die ID oben in die URL angefügt. (was ja eigentlich alles am Anfang ging ohne das Script).
Scheint mir irgendwie unlogisch zu sein, da ich auch auf Anhieb keinen Fehler entdecke.

Navigation:

<ul class="menu">
<li><a href="#1" class="active">Anker1</a></li>
<li><a href="#2">Anker2</a></li>
<li><a href="#3">Anker3</a></li>
<li><a href="#4">Anker4</a></li>
</ul>

Füge ich oben in die URL #2 zb. an wird aber zu dem Beitrag gesprungen.

Also irgendwas scheine ich zu übersehen

 

[Tronjer]

Die Hyperlink-Funktionalität von HTML wird ignoriert, wenn du per JavaScript von Anker zu Anker springst. In dem Fall muss das Linkziel nach dem Sprung auch per JS an die URL angehängt werden. Dafür gibt es location.hash

 

[scbawik]

Moin,

Habe seit einigen Tagen ein smooth-scroll script drin zum animierten Ankerscrollen. Irgendwie werden die IDs durch das Script aus der URL entfernt.
Wenn ich es rausnehme werden die IDs wieder angefügt. Blicke aber nicht wirklich durch welcher Teil des Scripts dies verursacht.

Script:

jQuery(document).ready(function(){
    jQuery("div#content a[href^='#']").click(function(event){
        var target = this.hash.replace('#','');
         event.preventDefault();
         var dest=0;
         if (jQuery('div#content a[id="'+target+'"]').length > 0) {
            if (jQuery('div#content a[id="'+target+'"]').offset().top > jQuery(document).height()-jQuery(window).height()){
                dest = jQuery(document).height()-jQuery(window).height();
            }
            else {
                dest = jQuery('div#content a[id="'+target+'"]').offset().top;
            } 
        }
         jQuery('html,body').animate({scrollTop:dest}, 500,'swing');
    });
});

Erkennt ihr woran es liegt dass die IDs aus der URL entfernt werden?

Noch eine weitere Sache wäre wenn ich das Script rausnehme werden IDs ja wieder angefügt. Jedoch habe ich eine Navigation die zu Ankern scrollen soll. Diese funktioniert dann gar nicht mehr, es wird weder gesprungen noch wird die ID oben in die URL angefügt. (was ja eigentlich alles am Anfang ging ohne das Script).
Scheint mir irgendwie unlogisch zu sein, da ich auch auf Anhieb keinen Fehler entdecke.

Navigation:

<ul class="menu">
<li><a href="#1" class="active">Anker1</a></li>
<li><a href="#2">Anker2</a></li>
<li><a href="#3">Anker3</a></li>
<li><a href="#4">Anker4</a></li>
</ul>

Füge ich oben in die URL #2 zb. an wird aber zu dem Beitrag gesprungen.

Also irgendwas scheine ich zu übersehen

"event.preventDefault();" verhindert (prevent) dass das Event wie gewöhnlich/vordefiniert (Default) ausgeführt wird. Das ist zwar richtig so für dein Vorhaben, sorgt aber auch dafür dass "#1" nicht wie normalerweise beim Klick auf einen Link an die URL angefügt wird.

Deshalb musst du diesen Schritt wie von Tronjer erklärt manuell machen.

 

[Tronjer]

Das Script schneidet die Raute aus dem Link aus und baut daraus einen neuen String. Ist eigentlich völlig überflüssig, und ein preventDefault() wird auch nicht unbedingt gebraucht.

Ich schreibe das jetzt aber nicht um, wenn der TE nur copy & pastet. Eigener Ansatz ist bei mir immer Voraussetzung.

 

[AzRaIL]

Ich schreibe das jetzt aber nicht um, wenn der TE nur copy & pastet. Eigener Ansatz ist bei mir immer Voraussetzung.

Das seh ich auch so. Mir hatte deine Erklärung mit location.hash eigentlich schon gereicht :)
Hab mich nun informiert und hinten an das Script, nach der Animation einfach

window.location.hash = target;

angefügt.
Scheint gut zu funktionieren. Ist das so richtig gemacht oder muss ich da noch was beachten?

lg

 

[Tronjer]

Scheint gut zu funktionieren. Ist das so richtig gemacht oder muss ich da noch was beachten?

Schon, aber ich zeige dir mal einen etwas besseren Ansatz. Die DOM-Manipulation durch zersägen des Strings ist unnötig.

Etwas HTML:

<article id="foo">
  <section id="eins">
    <p><a href="#zwei">Zu Kapitel 2</a></p>
    <p>Viel Text ... </p>
  </section>
  <section id="zwei">
    <p><a href="#eins">Zu Kapitel 1</a></p>
    <p>Viel Text ... </p>
  </section>
</article>

und dazu das Script:

$('#foo a[href*="#"]').click(function() {
  target = $(this).attr('href');
  $('html').animate({
    scrollTop: $(target).offset().top
  }, 1000 , function (){location.hash = target;});
});

 

[AzRaIL]

Wow hab mein Script mal umgebaut nach deinem Beispiel und es funktioniert einwandfrei!
Da hätte man sich die ganze Arbeit ja mit den IF-Abfragen sparen können.

jQuery(document).ready(function(){
    jQuery("div#content a[href*='#']").click(function(){
        var target = jQuery(this).attr('href');
        jQuery('html,body').animate({
            scrollTop: jQuery(target).offset().top
        }, 500, function() {location.hash = target;});
    });
});

Wozu war denn die Abfrage length > 0 im ursprünglichen Script?

 

[Tronjer]

if (element.length > 0){} fragt, ob das Element existiert.