DOM実践1-ページ上部に戻る

DOMと熟練したHTMLとCSSの操作を明らかにするために、3つの小さなDemoの練習手をすることを決定して、まず1つの最も簡単な「トップに戻る」効果の需要を実現します:1つのボタンをクリックしてページの最上位に戻ります

トップに戻る効果を実現

具体的な実装

まずレイアウトし、buttonを作成し、Idを'backToTop'とします.同時にこのボタンのCSSを設定して、常にページの右下に表示させます

  #backToTop{
    position: fixed;
    bottom: 100px;
    right: 20px;
  }

ボタンコンポーネントはgetElementById()で取得し、onclickイベントを設定し、buttonリファレンスが成功したかどうかをテストします.需要を実現するにはwindowを使用しなければなりません.scrollYプロパティでは、現在のスクロールバーがスクロールしたページの高さ(px)を取得し、setInterval()の方法で時間間隔のように上部に戻る動作にアニメーション効果を加えます.その間にscrollBy()を呼び出し続け、ページの上部に徐々に近づきます.

var button = document.getElementById('backToTop');
button.onclick = function () {
    let height = window.scrollY;
    let n = 1;
    let id = setInterval(function () {
        //console.log(n);
        if (n === 20) {
            clearInterval(id);
        }
        window.scrollBy(0, - height * n / 20);
        n += 1;
    }, 50);
}

関連する属性

window.scrollYは、ドキュメントが垂直方向にスクロールされたピクセル値を返します.setInterval()は、関数を繰り返し呼び出すか、コードセグメントを実行して、各呼び出しの間に一定の時間遅延させる.IntervalIDを返します.**clearInterval()**setIntervalで設定したtimeoutをキャンセルします.パラメータはsetInterval()が返すID値でなければなりません.window.scrollBy()スクロールするピクセル数を指定します
効果のプレビューhttps://tazbingor.github.io/small-front-end-project/test01-back-to-top/test.html