animasyonlu kaydırma betiği, harici bağlantılardan erişilebilecek yerel bağlantı konumlarını engeller

Question

Animasyon, sabitleme, soldurma işlemleri vb. Farklı efektler için gerekli tüm eklentileri/kitaplıkları (ve jQuery) kullanıyorum scrollmagic kullandığım bir onepager sitem var. kaydırma pozisyonları tarafından tetiklenir.

Aynı zamanda için bağlantı noktasında (menüden ve diğer yerel bağlantılardan) bağlantı noktalarına animasyonlu kaydırma yapmak için kullanıyorum - aşağıdaki komut dosyasının aşağıdaki bölümüne bakın.

sorun sayfa bir çapa ile doğrudan bir bağlantı veya favori aracılığıyla dışarıdan erişildiğinde bu komut görünüşte de yerel bir bağlantı tıklandığında bir anchorpoint doğrudan "atlama" varsayılan davranışını bastırır ve olmasıdır URL'ye eklenmiş (http://www.example.com/index.php#part3 gibi). Yerel bir bağlantıyı tıklatırken bu davranış istenirse de, bir bağlantı başka bir yerden bağlandığında tarayıcının bağlantı konumunu görüntülemesini açıkça engeller.

Yukarıdaki örnekteki gibi bir bağlantı tıklandığında tarayıcıyı bağlantı konumunu doğrudan görüntülemenin bir yolu var mı?

var sm_controller_1 = new ScrollMagic.Controller(); 

sm_controller_1.scrollTo(function(anchor_id) { 
     TweenMax.to(window, 2.0, { 
       scrollTo: { 
         y: anchor_id 
         autoKill: true 
       }, 
       ease: Cubic.easeInOut 
     }); 
}); 
jQuery(document).on("click", "a[href^=#]", function(e) { 
     var id = jQuery(this).attr('href'); 
     if(jQuery(id).length > 0) { 
       e.preventDefault(); 
       sm_controller_1.scrollTo(id); 
       if (window.history && window.history.pushState) { 
         history.pushState("", document.title, id); 
       } 
     } 
}); 

(Sorun harici bir kaynaktan orijinal URL'yi çağırma yatıyor beri codepen bir keman/oluşturmak mantıklı değildir).

varsayılan davranışını kullanmak istediğiniz bağlantıları bir veri özellik ekleyin: Bunu deneyebilirsiniz cevabım yolunda alacağı burada yayınlanan edilmez ekstra özelliğe sahip doesnt

Answer 1

denemek ve bu kodu kullanabilirsiniz:

jQuery(function ($) { 
    $(document).ready(function() {// if needed, use window.onload which fires after this event 
     if(window.location.hash) { 
      var hash = window.location.hash; 
      $('a[href=' + hash + ']').click(); 
     } 
    }); 
}); 

Bu DOM (veya sayfanın) kadar bekler yüklenir ve daha sonra nav öğe üzerinde kullanıcı tıklayın simüle.

Sorunuzu bir kez daha okuduktan sonra, sayfanızın ankrajta listelenen öğenin konumuna yüklenmesini istiyorsanız veya bir harici kaynaktan geldiğinde kaydırma çalışmadığından emin değilim. kaynak?

a) gövde üzerinde CSS opacity:0; kullanmak ve kaydırma bittikten sonra:

kaydırma çalışıyordu ancak bir atlama gibi doğru yerde sayfayı görüntülemek istiyorsa, o zaman 2 çözüm önerilerinde , geri yüklemek için opacity:1; b) ScrollMagic

Answer 2

Eh varsayarak kaydırma sihirli :

<a href="example.com/index.php#part3.php" data-default="true"> 

Kontrol veri niteliği varsa ve eğer varsayılan davranışı ile devam etmek için tıklayın işleyicisi içinde return true yaparsa:

var sm_controller_1 = new ScrollMagic.Controller(); 

sm_controller_1.scrollTo(function(anchor_id) { 
     TweenMax.to(window, 2.0, { 
       scrollTo: { 
         y: anchor_id 
         autoKill: true 
       }, 
       ease: Cubic.easeInOut 
     }); 
}); 
jQuery(document).on("click", "a[href^=#]", function(e) { 
     if(e.currentTarget.dataset.default){ 
      return true; 
     } 
     var id = jQuery(this).attr('href'); 
     if(jQuery(id).length > 0) { 
       e.preventDefault(); 
       sm_controller_1.scrollTo(id); 
       if (window.history && window.history.pushState) { 
         history.pushState("", document.title, id); 
       } 
     } 
});