jQueryを使用してWordPressでスムーズスクロールをトップ効果に追加する方法

WordPress Web サイトのページ効果の上部にスムーズ スクロールを追加しますか?

トップへのスクロール効果は、ページが長く、ユーザーがトップに戻る簡単な方法を提供したい場合に最適です。 Web サイトのユーザー エクスペリエンスの向上に役立ちます。

この記事では、jQuery とプラグインを使用して、WordPress にスムーズなスクロール ツー トップ効果を追加する方法を紹介します。

スムーズ スクロールとは何ですか? また、いつ使用する必要がありますか?

サイトに固定ヘッダー メニューがない限り、長い WordPress ページまたは投稿の下部までスクロールするユーザーは、手動でスワイプするかスクロールして上部に戻り、サイトをナビゲートする必要があります。

これは非常に煩わしく、多くの場合、ユーザーは単純に戻るボタンを押してその場を離れてしまいます。 そのため、ユーザーをページのトップにすばやく移動させるボタンが必要です。

次のように、jQuery を使用せずに、この機能を単純なテキスト リンクとして追加できます。

<a href="#" title="Back to top">^Top</a>

これにより、ミリ秒単位でページ全体を上にスクロールして、ユーザーをトップに送ります。 それは機能しますが、道路の隆起にぶつかったときのように、その効果は耳障りになる可能性があります.

スムーズスクロールはその逆です。 視覚的に心地よい効果で、ユーザーをトップにスライドさせます。 このような要素を使用すると、サイトのユーザー エクスペリエンスが大幅に向上します。

とはいえ、WordPress プラグインと jQuery を使用して、トップへのスムーズなスクロール効果を追加する方法を見てみましょう。

WordPress プラグインを使用してスムーズにスクロールしてトップに表示する効果を追加する方法

この方法は、コードを 1 行も入力することなく WordPress Web サイトにスクロール ツー トップ効果を追加できるため、初心者に推奨されます。

最初に行う必要があるのは、WPFront Scroll Top プラグインをインストールして有効にすることです。 サポートが必要な場合は、WordPress プラグインのインストール方法に関するガイドをご覧ください。

有効化すると、WordPress ダッシュボードから[設定] » [スクロール トップ]に移動できます。 ここでは、プラグインを構成し、スムーズ スクロール効果をカスタマイズできます。

最初に、[有効] チェックボックスをクリックして、サイトの一番上にスクロールするボタンを有効にする必要があります。 次に、スクロール オフセット、ボタン サイズ、不透明度、フェード時間、スクロール時間などを編集するオプションが表示されます。

下にスクロールすると、自動非表示時間の編集、小型デバイスでボタンを非表示にするオプションの有効化、wp-admin 画面での非表示などのオプションがさらに表示されます。

ボタンをクリックしたときの動作を編集することもできます。 デフォルトでは、ページの上部までスクロールしますが、投稿内の特定の要素やページへのリンクまでスクロールするように変更できます。

ボタンの位置を変更するオプションもあります。 デフォルトでは画面の右下隅に表示されますが、他の隅に移動することもできます。

WPFront スクロール トップ プラグインは、選択したページにのみスクロール ボタンを表示するフィルターも提供します。

通常、WordPress ブログのすべてのページに表示されます。 ただし、[ページに表示] セクションに移動して、スクロール効果を一番上に表示する場所を選択できます。

このプラグインは、選択可能な事前構築済みのボタン デザインも提供します。 サイトに合ったデザインを簡単に見つけることができるはずです。

事前に作成されたイメージ ボタンが見つからない場合は、WordPress メディア ライブラリからカスタム イメージをアップロードするオプションがあります。

完了したら、[変更を保存] ボタンをクリックします。

Web サイトにアクセスして、スクロール トゥ トップ ボタンの動作を確認できます。

WordPress で jQuery を使用してトップ効果にスムーズ スクロールを追加する

この方法は初心者にはお勧めできません。 ウェブサイトへのコードの追加が含まれているため、テーマの編集に慣れている人に適しています.

WordPress テーマで jQuery、いくつかの CSS、および 1 行の HTML コードを使用して、スムーズ スクロール トップ効果を追加します。

まず、メモ帳などのテキスト エディタを開き、ファイルを作成します。 smoothscroll.jsとして保存します。

次に、このコードをコピーしてファイルに貼り付ける必要があります。

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 'fast');
		return false;
		});
});

その後、ファイルを保存して、WordPress テーマ ディレクトリの/js/フォルダーにアップロードできます。 詳細については、FTP を使用してファイルを WordPress にアップロードする方法に関するガイドを参照してください。

テーマに/js/ディレクトリがない場合は、作成してsmoothscroll.jsをそこにアップロードできます。 詳細については、WordPress のファイルとディレクトリ構造に関するガイドもご覧ください。

このコードは、ユーザーをページの上部に移動させるボタンにスムーズ スクロール効果を追加する jQuery スクリプトです。

次に行う必要があるのは、 smoothscroll.jsファイルをテーマにロードすることです。 そのために、WordPress でスクリプトをキューに入れます。

その後、このコードをコピーして、テーマのfunctions.phpファイルに貼り付けます。 少しの間違いでサイトが破損する可能性があるため、テーマ ファイルを直接編集することはお勧めしません。 代わりに、WPCode などのプラグインを使用して、WordPress にカスタム コード スニペットを追加する方法に関するチュートリアルに従ってください。

wp_enqueue_script( 'smoothup', get_template_directory_uri() . 'https://cdn2.wpbeginner.com/js/smoothscroll.js', array( 'jquery' ), '',  true );

上記のコードでは、WordPress にスクリプトをロードし、プラグインが jQuery ライブラリに依存しているため、jQuery ライブラリもロードするように指示しています。

jQuery 部分を追加したので、ユーザーをトップに戻す実際のリンクを WordPress サイトに追加しましょう。 この HTML をテーマのfooter.phpファイルの任意の場所に貼り付けるだけです。 サポートが必要な場合は、WordPress にヘッダーとフッターのコードを追加する方法に関するチュートリアルをご覧ください。

<a href="#top" id="smoothup" title="Back to top"></a>

HTML コードにはリンクが含まれていますが、アンカー テキストが含まれていないことに気付いたかもしれません。 これは、上向き矢印の付いた画像アイコンを使用してトップに戻るボタンを表示するためです。

この例では、40x40px のアイコンを使用しています。 以下のカスタム CSS をテーマのスタイルシートに追加するだけです。

このコードでは、ボタンの背景画像として画像アイコンを使用し、固定位置に設定しています。 また、ユーザーがボタンの上にマウスを置くとボタンが回転する小さな CSS アニメーションも追加しました。

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}

#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

上記の CSS で、 https://www.example.com/wp-content/uploads/2013/07/top_icon.pngを使用する画像 URL に置き換えてください。 WordPress メディア アップローダーを使用して独自の画像アイコンをアップロードし、画像の URL をコピーしてコードに貼り付けることができます。

この記事が、jQuery を使用してサイトにスムーズ スクロール トゥ トップ効果を追加するのに役立つことを願っています。 また、中小企業向けの最高の WordPress プラグインの専門家の選択と、オンラインストアを開始する方法に関するステップバイステップガイドもご覧ください.

この記事が気に入ったら、WordPress ビデオチュートリアルの YouTube チャンネルに登録してください。 Twitter や Facebook で私たちを見つけることもできます。