2017-02-01 1 views
0

Ich versuche, Anker-Links von externen Seiten mit "animieren" und "scroll-top" in WordPress arbeiten, aber wenn ich versuche, zu der spezifischen ID mit Anker gehen Link bilden eine andere Seite, blättert Seite nach unten statt der Anker-ID, mit Ausnahme der ersten Link, funktioniert es wie es angenommen.WordPress scrollen zu ID von einer anderen Seite mit jQuery

 function foo(){ 
     $('#masthead #site-navigation a[href*="#"]:not([href="#"])').click(function() { 

     // top offstet 
     var offset = 10; 
     // get target form hash 
     var target = $(this.hash); 
     // Get hash from this 
     var hash = $(this).attr('href'); 
     // Get URL from injected JavaScript page object siteInfo 
     var host = siteInfo.siteUrl; 

     // if home 
     if($('body.home').length > 0){ 

      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 

      if (target.length) { 
      $('html, body').animate({ 
       scrollTop: target.offset().top + offset 
      }, 1000); 
      return false; 
     } 
     } 
     else { 
     window.location = host+"/#"+hash.substring(1); 
     return false; 
     } 
    }); 
    } 

foo(); 

Antwort

1

Ihr Ziel hat ein gültiges DOM-Element sein, was Sie unten haben target ein String

target = "/#"+hash.substring(1); 

Sie müssen zusammen mit, dass die jQuery-Selektor macht jetzt

target = $('#'+hash.substring(1)); 

Ziel wird ein gültiges dom-Element, das .offset().top einen Wert für

zurückgibt

PS Wenn die Seite neu zu laden, dann die .animate() hat außerhalb der .click() Funktion sein, weil das js Skript selbst

$('#masthead #site-navigation a[href*="#"]:not([href="#"])').click(function() { 
    var offset = 10; // <-- change the value here 
    // Get hash from this 
    var hash = $(this).attr('href'); 
    // Get URL from injected JavaScript page object siteInfo 
    var host = siteInfo.siteUrl; 
    window.location = host+"/#"+hash.substring(1); 
}); 

müssen Sie nur den unten stehenden Abschnitt über js des Ziels wieder von vorn geladen werden Seite. Es wird die aktuelle URL und bekommt den Text nach dem #, die auf die ID des div entsprechen sollten Sie Scrollen

var currentUrl = window.location.href; 
if(currentUrl.includes('#')) { 
    var urlArray = currentUrl.split('#'); 
    // gets the dom that has the id evaluated from `hash.substring(1)` 
    target = $('#'+urlArray[1]); 
    $('html, body').animate({ 
    scrollTop: target.offset().top + offset 
    }, 1000); 
} 
+0

, wie ich außerhalb Klick-Funktion setzen animieren sollte? Rückruf vielleicht? – Darko

+0

auch jetzt bekomme ich einen Fehler "target.offset (...) ist undefiniert" – Darko

+0

Ist der div/Abschnitt, den Sie auf der gleichen Seite mit den Links () scrollen möchten? –

Verwandte Themen