Drupalの任意のバージョンで独自のテーマで「トップに戻る」機能を5分で作成する方法


  1. テーマのディレクトリに移動します。通常、テーマは「themes/your_theme_name/」のようなディレクトリに存在します。

  2. テーマのルートディレクトリに「your_theme_name.libraries.yml」という名前のファイルを作成します。

  3. 作成したファイルに以下のコードを追加します:

back_to_top:
  version: 1.x
  js:
    js/back_to_top.js: {}
  dependencies:
    - core/jquery
  1. テーマのルートディレクトリに「js/」というディレクトリを作成します。

  2. 「js/」ディレクトリに「back_to_top.js」という名前のファイルを作成します。

  3. 作成したファイルに以下のJavaScriptコードを追加します:

(function ($) {
  $(document).ready(function(){
    // トップに戻るリンクの表示/非表示を切り替えるためのスクロールイベント
    $(window).scroll(function() {
      if ($(this).scrollTop() > 100) {
        $('.back-to-top').fadeIn();
      } else {
        $('.back-to-top').fadeOut();
      }
    });
    // トップに戻るリンクをクリックした際のスクロールアニメーション
    $('.back-to-top').click(function(){
      $('html, body').animate({scrollTop : 0},800);
      return false;
    });
  });
})(jQuery);
  1. テーマのテンプレートファイル(例:page.html.twig)を開き、以下のコードを追加します:
{# トップに戻るリンクの表示 #}
<a href="#" class="back-to-top" style="display: none;">トップに戻る</a>

これで「トップに戻る」機能がテーマに追加されました。ウェブページをスクロールすると、スクロール位置が一定値を超えると「トップに戻る」リンクが表示されます。クリックするとスクロールアニメーションが実行され、ページのトップに戻ります。