Angularでページ下部にスクロールする方法を実装する

Angularのアプリにページ下部にスクロールする実装をしたいな…

この記事では上記の悩みを解決します。

今回実装するイメージはこんな感じです。

画像左下にある下矢印アイコンをクリックすると、画面下までスクロールする機能です。

Angularで画面下にスクロールさせる機能の実装

下矢印アイコンをクリックしたら、画面下にスクロールする機能を実装していきます。

  <div class="scroll-field" (click)="onScroll()">
    <mat-icon class="search-icon">keyboard_arrow_down</mat-icon>
  </div>

コードを解説すると、クリックしたら、onScroll()のアクションが走ります。あとで処理を書いていきますがこのアクションに下スクロールする機能を実装します。

また、下矢印アイコンはmat-iconを活用しています。

  /**
   * スクロール処理
   */
  public onScroll() {
    // ドキュメント要素の取得
    const element = document.documentElement;

    // スクロールの高さを取得し、スクロール下の要素を算出する
    const bottom = element.scrollHeight - element.clientHeight;

    // 画面下にスクロールする
    window.scrollTo({top: bottom, behavior: 'smooth'});
  }

onScrollアクションの内容です。

document.documentElementでdocumentのルート要素は取得します。

参考：Document.documentElement

element.scrollHeightは、スクロール分を含めた要素の高さを取得します。

参考：Element.scrollHeight – スクロール分を含めた高さを取得する

element.clientHeighは、表示域の高さを取得します。

参考：Element.clientHeight- 表示域の高さを取得する

bottomという変数に、スクロールした時の下要素を取得し、window.scroll関数を使って画面下まで移動させます。

プロパティに、smoothを指定することでスクロールする速さを指定できます。

このスクロールの速さは、カスタム可能です。

参考：window.scrollTo

上記のように実装することで、画面下にスクロールさせることができます。

エンジニアの基礎力を上げるおすすめ本を紹介！

• 30冊以上紹介(個人的に推し本の『仮説思考』の何が良かったかも書いています)
• エンジニアなら読むべき定番の技術本や思考力を上げるなど…多数の本を紹介
• AIの回答を判断できるための知識をつける本がたくさん

あわせて読みたい

エンジニアなら読むべきおすすめ本【2026年版の基礎力が身につく必読書】 「AIに聞けば答えは出る。でも、その答えの『正しさ』を判断する力はありますか？」 なかなか「正しく判断する力は私はある」と答えられる人は少なくなってきているので...