新浪Weibo_jqueryのトップに戻るJquery実装コード

1.はじめに

Webページでは、ページが上位にある場合に、ユーザーがすぐにトップに戻ることができるように、トップに戻るボタンが追加されます。

その中で、淘宝では、トップに戻るボタンが表示される前に、スクロール バーのスクロール距離が一定以上である必要があります。Sina Weibo では、トップに戻るボタンが直接表示されます。がスクロールの高さであり、0 より大きい場合に表示され、先頭に戻る効果は滑らかなアニメーション効果です。この記事の実装は、新浪微博のこの効果に似ています。

2. jQuery のトップ関数に戻る

ここをクリックできます: jQuery のトップに戻るデモ

ページにスクロールの高さがある場合、以下の図に示すように、黒い背景と「トップに戻る」という文字が右下隅にある小さな半透明のバーが表示されることがわかります:

実装原則については、まあ...気にする人はほとんどいないでしょう。なので、言葉を無駄にして直接コードに進むのは面倒です。

ここでの jQuery 実装であっても、MooTools 実装であっても、次の CSS コードは一貫しています:
CSS コード:

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

.backToTop {
display: none;
width: 18px;
line-height: 1.2 ;
パディング: 5px 0;
背景色: #000;
フォントサイズ: 12px;固定;
_位置: 絶対;
右: 100ピクセル;
カーソル: 不透明度:
フィルター: Alpha( opacity=60);
}


JS コード:




コードをコピー

コードは次のとおりです。

(function() { var $backToTopTxt = "トップに戻る", $backToTopEle = $('

').appendTo($("body")) .text($backToTopTxt).attr("title", $backToTopTxt).click(function() { $("html , body").animate({scrollTop: 0 }, 120); }), $backToTopFun = function() {

var st = $(document).scrollTop(), winh = $(window) .height();

(st > 0): $backToTopEle.hide();
//IE6 での配置
if (!window.XMLHttpRequest) {
$backToTopEle.css(" トップ", st winh - 166);
$(ウィンドウ).bind("スクロール", $backToTopFun); ) { $backToTopFun() });




3. MooTools でのトップに戻る関数の実装
ここをクリックできます: MooTools のトップに戻るデモ

デモ ページの効果は、基本的に上記の jQuery デモの効果と同じです。

コード部分。 CSS コードは上記とまったく同じです。 JS コードは次のとおりです。

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


(関数() {
var $backToTopTxt = "トップに戻る", $backToTopEle = new Element("div", {
"class": "backToTop",
title: $backToTopTxt

}) .set("text", $backToTopTxt).addEvent("click", function() { var st = document.getScroll().y, Speed = st / 6; var funScroll = function() { st -= 速度; if (st if (st > 0); (funScroll, 20); } };

funScroll();

}).inject(document.body), $backToTopFun = function() {
var st = document.getScroll() .y, winh = window.getSize().y;
(st > 0)? $backToTopEle.setStyle("表示", "なし") ;
//IE6
if (!window.XMLHttpRequest) {
$backToTopEle.setStyle("top", st winh - 166)
}; window.addEvents({
scroll: $backToTopFun,
domready: $backToTopFun
})();
上記のコードを直接コピーすると、JS コードで効果を簡単に実現できます。

MooTools のアニメーション メソッド Fx はスクロールをサポートしていません。スクロール バーのスムーズなスクロール効果を実現するには、Fx.Scroll プラグインを使用する必要があります。ただし、明らかに、ここでの単純な機能に追加のプラグインを使用する必要はないため、スムーズなスクロール効果を実現するためにタイマーが直接設定されます。

注: デモ ページの美しい写真は、ページの高さを拡張してスクロール バーを作成するために使用されています。

4. 結論
実際、ページを先頭に戻す効果を実現する最も簡単な方法は a タグであり、href 属性値は直接 #anchor です。それで大丈夫です。ただし、この方法では URL アドレスの後に「#」が生成されます。アンカー ポイントの詳細については、以前の記事「jQuery でのアンカー ポイントのジャンプと関連操作とプラグインについて」を参照してください。