2015-06-14 17 views
7

çalışmıyor: te sayfa aşağı gezinmek için bir düğme bulunmaktadır http://i333180.iris.fhict.nl/p2_vc/JavaScript smoothscroll Hala sitemde çalışan

, aksiyon anlık ama yumuşak kaydırma çok daha güzel.

Yani, etrafta dolaştım, çok denedim ve bulduğum en kısa senaryo şu: Ama çalışamıyorum.

$(function() { 
     $('a[href*=#]:not([href=#])').click(function() { 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 

      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
      $('html,body').animate({ 
       scrollTop: target.offset().top 
      }, 1000); 
      return false; 
      } 
     } 
     }); 
    }); 

Ref: https://css-tricks.com/snippets/jquery/smooth-scrolling/

Bu benim

arasında benim koduna eklenen nasıl
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script> 
    $(function() { 
     $('a[href*=#]:not([href=#])').click(function() { 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 

      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
      $('html,body').animate({ 
       scrollTop: target.offset().top 
      }, 1000); 
      return false; 
      } 
     } 
     }); 
    }); 
    </script> 
    </head> 

Düğme: Sitenin cadı verildi örnek teftiş ve eklemiş

<body> 
    <a id='button_down' href='#section' onclick="document.getElementById('moodvideo').pause()"><img src='scroll.png' alt='Scroll'></a> 
</body> 

html'ye aynı şekilde. Referans linki teftiş: https://css-tricks.com/examples/SmoothPageScroll/ Ama ben bir diğer komut, cadı videonun sonunda sonra, aynı eylemi ihtiyacı var, Ayrıca ..

çalışma yapmak olamaz. Bunun için Senaryo şu şekildedir:

Bu aynı şeyi yapmak zorunda
<script> 
     function videoEnded() { 
      window.location.href="#section"; 
     } 
    </script> 

; güzelce kaydır.

Anlaşılabilir olduğunu açıkladım umarım, tekrar denemek isterim. o easer İnternetten ekleyebilirsiniz yapar eğer senaryo, henüz çalışma isnt çünkü Selamlar

DÜZENLEME komut isnt online sitesine ekledi.

güncelleme sitesi <script> Bu parça çok daha iyidir değil çalışan komut

cevap

2

videoEnd() işlevinin anlamı

Bulduğunuz düz kaydırma betiği yalnızca bağlantı etiketleri için çalışır (<a>).

window.location.href = "#section" bir bağlantı etiketi değildir, komut dosyasından etkilenmez.

Ne yapabilirsiniz, ancak bu betiğin önemli bitlerini alıp videoEnd() işlevinde kullanabilirsiniz.

function videoEnded() { 
 
    $('html,body').animate({ 
 
     scrollTop: $("#section").offset().top 
 
    }, 1000); 
 
}

DÜZENLEME: Eğer file:// protokolünü ve jQuery kendisine bağlanan komut kaynağı kullanarak sayfaya göz çünkü

sizin için çalışmıyor nedeni

//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

yok tarayıcınız bu dönüştürerek, geçerli tarama şemasını sonuna eklergöreli düzeni, ..

file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

. http://'u belirtirseniz,

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
0

ile yayında:

senaryo amaçlandığı gibi canlı kopyası üzerinde linklere çalışır, bu yüzden sana inanıyorum
$(document).ready(function() { 
    $("a[href*='#']").on("click", function(event) { 
     event.preventDefault(); 
     var href = event.target.href; 
     href = href.slice(href.indexOf("#"), href.length); 
     $("body").animate({ 
      scrollTop: $(href).get(0).offsetTop 
     }, 1000); 
    }); 
}); 
İlgili konular