-
テーマのディレクトリに移動します。通常、テーマは「themes/your_theme_name/」のようなディレクトリに存在します。
-
テーマのルートディレクトリに「your_theme_name.libraries.yml」という名前のファイルを作成します。
-
作成したファイルに以下のコードを追加します:
back_to_top:
version: 1.x
js:
js/back_to_top.js: {}
dependencies:
- core/jquery
-
テーマのルートディレクトリに「js/」というディレクトリを作成します。
-
「js/」ディレクトリに「back_to_top.js」という名前のファイルを作成します。
-
作成したファイルに以下の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);
- テーマのテンプレートファイル(例:page.html.twig)を開き、以下のコードを追加します:
{# トップに戻るリンクの表示 #}
<a href="#" class="back-to-top" style="display: none;">トップに戻る</a>
これで「トップに戻る」機能がテーマに追加されました。ウェブページをスクロールすると、スクロール位置が一定値を超えると「トップに戻る」リンクが表示されます。クリックするとスクロールアニメーションが実行され、ページのトップに戻ります。