ホームページ > 記事 > ウェブフロントエンド > 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';
}
ここでの obj オブジェクトは window、ターゲット ターゲット位置は 0、callback はコールバック関数です。パラメータが渡されない場合は無視できます。
タイマーを設定します setInterval() ;
ステップをステップ値として宣言します。値は先頭位置から現在のスクロールバー位置までです。その差を 10 で割ります (ステップはどんどん小さくなり、スクロール速度は徐々に遅くなり、スクロール バーが高速から低速にスライドする速度を実感します)
if(window.pageYOffset >= mainTop) { // 当用户滚到main模块时显示返回顶部按钮 goBack.style.display = 'block'; } else { goBack.style.display = 'none'; }
sliderbar.addEventListener('click', function() {
animate(window, 0);
})
毎回タイマーが呼び出されます関数が少しずつ上にスライドします
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 サイトの他の関連記事を参照してください。