jquery Web ページのトップに戻る効果 (アイコンのフェード、自己書き込み)_jquery

WBOY
リリース: 2016-05-16 16:44:16
オリジナル
1180 人が閲覧しました

さて、開発要件に移りましょう。ウェブページに多くのコンテンツがある場合、ユーザーは自分でハンドルを回すのではなく、すぐにトップに戻るボタンが必要です~

私は当初そうするだろうと考えていました。上記は、どのページが参照され、どのページが表示されるかを実装するためにすべて js を使用する必要があるため、言うのは困難です。

それで、書いてみました、え、見つかりませんでした、言うのはとても簡単です~~

できるだけ早くおならします、直接行ってくださいコード、オナラがたくさん出てクソになるよ~~ まあ、罪、阿弥陀様、アーメン~~

コードをコピー コードは次のとおりです:

//トップに戻る js 
$(function(){
var $btn_top = $('');
$btn_top.css({ '表示':'なし'、
'幅':'40px'、
'高さ':'40px'、
'位置':'固定'、
'右':' 20px',
'bottom' :'100px',
'z-index':'999'
});
$("body").append($btn_top); >$("body").on ("click","#scrollTopBtn",function(){
$("html,body").animate({scrollTop: 0},"slow");
});
var $ btn = $("#scrollTopBtn");
if($(window).scrollTop() > 100){
$btn.fadeIn(600); >}
$(ウィンドウ) .scroll(function(){
if($(ウィンドウ).scrollTop() > 100){
$btn.fadeIn(600);
}else {
$btn.fadeOut( 600);
}
});


絶対パス「css」を使用します。 /web/images/"scrollTop.png"

5 行目と 6 行目でサイズを直接変更するだけで、ページに猫タグを追加する必要がなくなります~~(>^ω^<)にゃ~~~

js ファイルとして保存して、誰が使用するかわからないところに直接引用してください。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!