0
私の一部のスクリプト(下記参照)に 'async'を追加しましたが、トップリンクスクリプトは表示されないか、機能しません。私はJavaScriptを大量によく知らないので、答えを見つけることができないと思いますか?以下は本文の下部にあるコードです:asyncとインラインJavaScriptを使用
<div class="sprite topsite active" style="display: none;">
<a href="#nav">Back to top arrow</a>
</div>
<script async src="content/js/hideaddressbar.min.js"></script>
<script async src="content/js/respond.min.js"></script>
<script async type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script async src="content/js/picturefill.min.js"></script>
<!-- back to top link -->
<script>
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.topsite').fadeIn(500);
} else {
$('.topsite').fadeOut(300);
}
});
// Animate the scroll to top
$('.topsite').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
})
});
</script>
ありがとうございました、ありがとうございます!
注意: '' async'を使用すると、ブラウザはHTMLページを読み込み、ブラウザが同時にスクリプトをロードして実行する間にレンダリングしますが、 'defer'を使用するとブラウザはスクリプトを実行します。ページの解析が完了しました。また、あなたの場合、インラインスクリプトはすべての 'async'スクリプトの前に実行されることに注意してください。 – Krusader
あなたは 'async'を使って言いましたが、非同期的なものは見えません – kchason
ブラウザのコンソールを確認してください。$が定義されていないというメッセージが表示されます。あなたには驚かないはずですが、結局のところ、jQueryのソースコードを含むファイルをいつロードするか気にしないとブラウザに指示しました。だから、あなたの変更を取り消すか、あなたがやっていることとそれを修正/緩和する方法を正しく読んでください。 – CBroe