JavaScript は淘宝網のトップに戻る効果を模倣します (コード例)

この記事で紹介するのは、JavaScript を模倣した淘宝網のトップに戻る効果 (コード例) です。一定の参考値があるので、困っている友達が参考になれば幸いです。

要件: スクロール バーが特定の位置に達すると、サイドバーは特定の位置に固定され、特定の位置までスライドすると、サイドバーが戻るトップへボタンが表示されます。ボタンをクリックすると、ページが動的に上部にスライドし、高速から低速まで上にスライドします。

アイデア:

1. js コードは、ページが読み込まれた後にのみ実行できます。 js を追加できます コードは一番下に書かれています (これは一番上の例に戻る方法です)

一番上に書きたい場合は、次の 2 つを使用できます:

①window.onload = function() {...}

②window.addEventListener('load', function() {...})

##2. 使用する必要がある要素を取得します

#3. スクロール イベントをバインドしますscroll

#ユーザーがバナーモジュールまでスクロールしたとき サイドバーを固定にする イベントクリック

##トップに戻るボタンをクリックした後、ページが動的にスライドします

#

if(window.pageYOffset >= bannerTop) {    // window.pageYOffset 屏幕被滚上去的距离
    sliderbar.style.position = 'fixed';   // 当用户滚到banner模块时使侧边栏变为固定状态
    sliderbar.style.top = sliderbarTop + 'px'; 
} else {
    sliderbar.style.position = 'absolute';
    sliderbar.style.top = '300px';
}

5. アニメーション関数 animate(obj, target, callback) について

ここでの obj オブジェクトは window、ターゲット ターゲット位置は 0、callback はコールバック関数です。パラメータが渡されない場合は無視できます。

タイマーを設定します setInterval() ;

ステップをステップ値として宣言します。値は先頭位置から現在のスクロールバー位置までです。その差を 10 で割ります (ステップはどんどん小さくなり、スクロール速度は徐々に遅くなり、スクロール バーが高速から低速にスライドする速度を実感します)

 if(window.pageYOffset >= mainTop) {    // 当用户滚到main模块时显示返回顶部按钮
     goBack.style.display = 'block';
 } else {
     goBack.style.display = 'none';
 }

ただし、step は必ずしも整数であるとは限りません。整数を指定すると、スクロール バーを少し前に移動させることができます。スクロール バーは上下にスライドできるため、ステップはゼロより大きくても小さくてもかまいません。ゼロより大きい場合は切り上げ、ゼロより小さい場合は切り捨てます。

 sliderbar.addEventListener('click', function() {
     animate(window, 0);
 })

window.scroll(x, y) ドキュメント内の特定の位置までスクロールします。 ,

毎回タイマーが呼び出されます関数が少しずつ上にスライドします

var step = (target - window.pageYOffset) / 10;

アニメーションが完了したかどうかを判断し、完了していればタイマーを閉じますclearInterval ();

step = step > 0 ? Math.ceil(step) : Math.floor(step);

詳細 コードは次のとおりです:

window.scroll(0, window.pageYOffset + step);

さらに優れた JavaScript 特殊効果コードは、次の場所で入手できます: js 特殊効果コレクション

以上がJavaScript は淘宝網のトップに戻る効果を模倣します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。