0
jQueryをブートストラップ内で初めて使用しました。w3school Tutorialを使ってスムーズなスクロールをページに追加しました。アンカーが同じページにある限り、これは正常に動作します。刻印を追加して同じメニューを作成したかったので、リンクは別のページのアンカーを指していません(例:home.html#section1)。
しかし、現時点では動作しません。リンクをクリックしても何の効果もありません。jqueryスムーズスクロールでスクロールして別のページに固定
スクリプトコード:
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#home']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
})
</script>
私はインプリントページからコードスニペットを削除すると、アンカーリンクが動作しているが、何のスクロールがないため、home.htmlページのアニメーションの部分がありません(手動でスクロールするまでは、ロードされます)。 ご協力いただきありがとうございます!
ありがとう、これはスクリプト全体を削除するのと同じ方法で動作します。アンカーリンクは今はうまく動作しますが、ターゲットサイトでは手動でスクロールするまで要素が読み込まれません。そのための解決策はありますか? – Stefan
私はJSよりも多くのコードを参照する必要があります。あなたはjsfiddleやbootplyをまとめることができますか? – Ishio