HTMLページの上部に戻るいくつかの実装

3352 ワード

最近开発サイトでトップボタンを作る必要がありますが、私は主にバックエンドの开発で、フロントエンドにあまり熟练していません.ネット上の资料の検索を経て、トップボタンを作りました.以下は2つの简単な方法で、记录します.当サイトが好きな友达はコレクションすることができて、不定期に学习资料を更新します.
1つ目:外部jQueryを参照
新しいHTMLページを作成し、次のコードをコピーして保存し、ブラウザで開くことで効果を見ることができます. doc
$(function(){ for(var i =0 ;i <100;i++){ $("#article").append("<p>xxxxxxxxxx<br></p>") } }) $(function(){ $(window).scroll(function(){ // , var scrollt = document.documentElement.scrollTop + document.body.scrollTop; // if( scrollt >200 ){ // 200px, $("#back_top").fadeIn(400); // }else{ $("#back_top").stop().fadeOut(400); // , . stop() , } }); $("#back_top").click(function(){ // , animate 200 , $("html,body").animate({scrollTop:"0px"},200); }); });

2つ目:cssおよび特殊アイコンを使用して設定
全コードは簡潔で美しく上部ボタンに戻り、同様に、コードをHTMLファイルにコピーし、開くと効果が見られる. doc $(function(){
for(var i =0 ;i <100;i++){
$("#article").append("<p>xxxxxxxxxx<br></p>")
}
})
$(function(){
$(window).scroll(function(){//ウィンドウがスクロールすると、次のコードがトリガーされます
var scrollt = document.documentElement.scrollTop + document.body.scrollTop;//スクロール後の高さの取得
if(scrollt>200){//スクロール後の高さが200 pxを超えると判断すると、
$("#back_top").fadeIn(400);//フェードアウト
}else{
$("#back_top").stop().fadeOut(400);//戻るか超えなければフェードインする.stop()を付けて停止する前にアニメーションを追加する必要があります.そうしないとフラッシュが発生します.
}
});
$("#back_top").click(function(){//ラベルをクリックすると、animateを使用して200ミリ秒でトップにスクロールします
$("html,body").animate({scrollTop:"0px"},200);
});
});
以上の2つの方式は構想を提供するだけで、直接使用してもよく、具体的に欲しいアイコンは自分でデバッグすることができる.