ワンクリックトップに戻る関数のJS実装サンプルコード_javascriptスキル

1. 基本的な準備:

scrollTop() メソッドは、一致する要素のスクロール バーの垂直位置を返すか、設定します。

スクロール上部のオフセットは、スクロール バーの上部に対する相対的なオフセットを指します。

このメソッドがパラメーターを設定しない場合、スクロール バーの上部からのオフセットをピクセル単位で返します。

構文

$(selector).scrollTop(offset)

2.

toggleClass() 選択した要素を設定または削除する 1 つ以上のスイッチ複数のクラスの間。

たとえば、すべての

要素を設定および削除する「main」クラスを切り替えるには:

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

$("button").click(function(){
$("p").toggleClass("main");
});

3.

setInterval() メソッドは、指定された期間 (ミリ秒) に従って関数を呼び出したり、式を計算したりできます。

setInterval() メソッドは、clearInterval() が呼び出されるかウィンドウが閉じるまで関数を呼び出し続けます。 setInterval() によって返される ID 値は、clearInterval() メソッドの引数として使用できます。

4.

scrollTo() メソッドは、指定された座標までコンテンツをスクロールできます。

scrollTo(xpos,ypos)

パラメータ 説明
xpos 必須。ウィンドウのドキュメント表示領域の左上隅に表示されるドキュメントの x 座標。
ypos が必要です。ウィンドウのドキュメント表示領域の左上隅に表示されるドキュメントの y 座標。

上方向へのワンクリックを実現するコードは次のとおりです。

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

var topbtn = $("#totop"); ワンクリックで表示されるボタン要素
var lastScroll = 0;
topbtn.css("display" , "none");

window.onscroll = function(){ onscroll は HTML5 の属性のようです
var top = $(window).scrollTop();

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

if(top > 0 ){
topbtn.css("display" , "");
}
if(top == 0){起動状態であれば上アイコンは表示されません
topbtn .css("表示", "なし");
}
};

topbtn.click(function(){ クリックイベント
varscrollTop = 0;
var curPos = $(window).scrollTop(); スクロールバーの位置
topbtn.addClass("movingtotop"); 移動中に別の画像を表示します
var step = Math.abs(scrollTop - curPos) / 200 ;
var tid = setInterval(function() {連続呼び出し、アニメーションを画像にフレーム化する
topbtn.toggleClass("movingtotop"); 要素の属性の設定と削除を交互に使用して作成する絶妙なコード動的なちらつき効果
if (curPos >scrollTop 14) {
curPos -= step;
step = step * 1.05; 速度は徐々に増加します
window.scrollTo(0, curPos); 🎜>} else if (curPos window.scrollTo(0,scrollTop);
topbtn.removeClass("movingtotop");
clearInterval(tid) ); ループを閉じます
}
},
});