ホームページ >ウェブフロントエンド >jsチュートリアル >jquery と css を組み合わせて、トップに戻ることを簡単に実現します。
jquery と css を組み合わせて、トップに戻ることを簡単に実現します。
- WBOYオリジナル
- 2016-05-16 17:20:491001ブラウズ
CSS:
コードをコピー コードは次のとおりです:
.backToTop {
display : なし;
幅: 1.2;
背景色: #000;サイズ: 12px;
位置: 固定;
下: 100ピクセル;
カーソル: ポインター;
不透明度: .6;
フィルター: Alpha(opacity=60)
}
jQuery コード
コードをコピー
コードは次のとおりです:
(function() { var $backToTopTxt = "トップに戻る" , $backToTopEle = $(' ').appendTo($("body")) .text($backToTopTxt).attr("title", $backToTopTxt).click(function () { $("html, body").animate({scrollTop: 0 }, 120); }), $backToTopFun = function() { var st = $(ドキュメント)、winh = $(window).height();
(st > 0): $backToTopEle.hide(); /IE6 での配置if (!window.XMLHttpRequest) {
$backToTopEle.css("top", st winh - 166);
}
$(window);バインド("スクロール", $backToTopFun);
$(function() { $backToTopFun(); })();:
$backToTopEle.css("top", st winh - 166);
}
$(window);バインド("スクロール", $backToTopFun);
$(function() { $backToTopFun(); })();:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。