HTMLページの上部に戻るいくつかの実装
3352 ワード
最近开発サイトでトップボタンを作る必要がありますが、私は主にバックエンドの开発で、フロントエンドにあまり熟练していません.ネット上の资料の検索を経て、トップボタンを作りました.以下は2つの简単な方法で、记录します.当サイトが好きな友达はコレクションすることができて、不定期に学习资料を更新します.
1つ目:外部jQueryを参照
新しいHTMLページを作成し、次のコードをコピーして保存し、ブラウザで開くことで効果を見ることができます.
2つ目:cssおよび特殊アイコンを使用して設定
全コードは簡潔で美しく上部ボタンに戻り、同様に、コードをHTMLファイルにコピーし、開くと効果が見られる.
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つの方式は構想を提供するだけで、直接使用してもよく、具体的に欲しいアイコンは自分でデバッグすることができる.
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つの方式は構想を提供するだけで、直接使用してもよく、具体的に欲しいアイコンは自分でデバッグすることができる.