最高の無料のWordPressスムーズスクロールプラグイン2022

公開: 2021-11-09

最高の無料のWordPressスムーズスクロールプラグイン2019

Webサイトを作成したが、Webサイトのコンテンツが長すぎて理解しにくい場合は、WordPress Smooth ScrollPluginsを使用できます。

WordPressのスムーズスクロールプラグインは、ウェブサイトを上下にスムーズにスクロールするのに役立ちます。それはあなたのウェブサイトのユーザーエクスペリエンスを改善するだけでなく、コンバージョン率にも大きな影響を与えます。あなたのユーザーがあなたのウェブサイトにもっと長く従事するからです。

jQueryを使用してWordPressのトップエフェクトにスムーズスクロールを追加するにはどうすればよいですか？

他のさまざまなWebサイトがページの上部にスムーズにスクロールする効果があるのはなぜだろうか。ページが長い場合は、スムーズなスクロールトップ効果を追加するのに最適です。

これにより、ページでのユーザーエクスペリエンスが向上すると同時に、ユーザーがすばやくトップに戻ることが容易になります。

問題は、WordPressサイトのトップエフェクトにスムーズなスクロールをどのように追加するかということです。そうですね、jQueryを使用して簡単に行うことができます。ここでは、jQueryを使用して簡単に実行する方法について説明します。読む：

スムーズスクロールとは何ですか？いつ使用するのですか？

ページや投稿に多くのコンテンツが含まれている場合、ユーザーは下にスクロールしてすべてを読む必要があります。ユーザーが下にスクロールし始めると、ナビゲーションリンクが上がり始めます。

ユーザーが読み終えたら、スクロールして、ユーザーに何かが残っているかどうかを確認する必要があります。一番上のボタンまでスクロールすると、リーダーをすばやく操作できます。 jQueryを使用せずに、このテキストリンクを追加することを選択できます。

 <ahref="#"title="トップに戻る">^トップ</a>

ほんの一瞬で上にスクロールしながら、読者をページの一番上に送ります。機能的なものとして機能します。

ただし、スムーズなスクロールはこれとは逆です。スムーズなスクロールは、ユーザーがページの上部に戻るのに役立ちます。これは、サイトのユーザーエクスペリエンスを向上させるのに役立ちます。

WordPressのjQueryでトップエフェクトにスムーズスクロールを追加しますか？

トップエフェクトにスムーズなスクロールを追加したい場合は、jQueryを使用できます。同時に、WordPressのテーマのHTMLコード用に1行のCSSを追加する必要があります。

最初にそれを開始するには、メモ帳などのテキストエディタを開く必要があります。次に、ファイルを作成し、smoothscroll.jsとして保存する必要があります。次に、コードをコピーしてファイル領域に貼り付ける必要があります。

jQuery（document）.ready（function（$）{
$（window）.scroll（function（）{
if（$（this）.scrollTop（）<200）{
$（ '＃smoothup'）。fadeOut（）;
} 
それ以外 {
$（ '＃smoothup'）。fadeIn（）;
}
}）;
   $（ '＃smoothup'）。on（ 'click'、function（）{
$（ 'html、body'）。animate（{scrollTop：0}、 'fast'）;
falseを返します。
}）;
}）;

次に、ファイルを保存する必要があります。その後、WordPressテーマディレクトリの/ js / folderにアップロードできます。テーマに/ js /ディレクトリがない場合は、作成から始める必要があります。

その後、smoothscroll.jsをこのディレクトリにアップロードできます。このコードはjQueryスクリプトと呼ばれ、ボタンにスムーズなスクロール効果を追加します。これは基本的に、ユーザーがページの上部にスムーズに移動するのに役立ちます。

その後、このsmoothscroll.jsをテーマ領域に追加する必要があります。それをしたい場合は、WordPressにスクリプトを追加する必要があります。テーマのfunctions.phpファイルに貼り付ける必要のあるスクリプトまたはタラは次のとおりです。

wp_enqueue_script（ 'smooth up'、get_template_directory_uri（）。 '/ js / smoothscroll.js'、array（ 'jquery'）、”、true）;
このコードは、WordPressにコマンドをスクリプトに送信します。同時に、プラグインがjQueryライブラリに依存しているため、WordPressにjQueryライブラリをロードするように指示します。

jQueryパーツの追加が完了したら、Word Pressサイトへの実際のリンクを追加する必要があります。これにより、ユーザーはトップエリアに戻ります。テーマのfooter.phpファイルのどこかにHTMLコードを貼り付ける必要があります。

 <ahref="#top"title="トップに戻る"></a>

この手順には、ファイルへのリンクの追加が含まれますが、テキストにはリンクされていません。これは、上向きの矢印に画像アイコンを使用する必要があるためです。これにより、トップに戻るボタンを表示できるようになります。
テーマのスタイルシートに40x40pxのアイコンを追加する方法は次のとおりです。

#smoothup { 
高さ：40px; 
幅：40px; 
位置：固定;
下：50px;
右：100px;
テキストインデント：-9999px;
display：none;
背景：url（ "http://www.example.com/wp-content/uploads/2013/07/top_icon.png"）; 
-webkit-transition-duration：0.4s; 
-moz-transition-duration：0.4s; 遷移時間：0.4秒; 
}
 
#smoothup：hover {
-webkit-transform：rotate（360deg）}
背景：url（ ''）繰り返しなし;
}

上記のCSSでは、画像アイコンの位置をアイシングすることを選択しました。また、背景画像としての画像アイコンの使用法も含まれています。次に、WordPressメディアアップローダーを使用して画像アイコンをアップロードする必要があります。

次に、貼り付ける必要のある画像URLを背景URLとして取得できます。ボタンを回転させ続けるCSSアニメーションをボタンに追加したので、ユーザーはマウスポインターをボタンの上に置きます。

次に、一番上の効果までスクロールする必要があります。これにより、ユーザーは一番上の領域に戻って、Webサイトで他に何ができるかを見つけることができます。

フローティングフッターを追加して、機能の内容を簡単に表示することもできます。ユーザーが記事を共有するために上部の領域にスクロールしたくない場合は、フローティングソーシャル共有バープラグインを使用して、記事をより管理しやすくすることができます。

2022年のスムーズなスクロールプラグイン–非常に軽量で高速

WordPress Smooth Scroll Pluginsは、他のすべてのデバイスやブラウザーで問題なく、はるかに高速かつ効果的に動作します。

また、Yoast SEO、Contact Form 7、NextGen Gallery、Slider Revolution、WooCommerce、SKTページビルダー、Visual Composer、Elementorなどの他のプラグインとの連携も良好です。

ブログ、ポートフォリオWebサイト、コンサルタントWebサイト、企業Webサイト、eコマース関連Webサイト、クリエイティブエージェンシー、不動産Webサイト、個人CV、小売企業Webサイトなどの大規模ビジネスまたは小規模ビジネスWebサイト。WordPressSmoothScrollPluginsを使用してウェブサイトのルックアンドフィール。

多くの無料のWordPressScrollプラグインが利用可能ですが、すべての訪問者が気に入るであろうほとんどのSmoothスクロールプラグインを強調しています。以下をご確認ください。

1. idまでページスクロール：

IDまでページスクロール

ページスクロールtoidは、完全に特徴付けられ、十分に開発された機能を備えたオープンソースソフトウェアです。それはあなたにスムーズなスクロールアニメーション効果を与えます。
idプラグインへのページスクロールは調整可能です。言及されたidとoffsetの助けを借りて、このプラグインはページのサイズを計算し、それを自動的に設定します。

2.スクロールのスティッキーメニュー（または何でも！）：

スティッキーメニューまたはスクロール上の何か

スクロールプラグインのスティッキーメニュー（またはその他）は無料で利用できます。メニューや要素を粘着性のあるものにするのに役立ちます。スティッキー要素をクリックすると、ページの上部に直接スクロールします。スティッキーにしたい正しい要素を取り出すには、HTML / CSSに関するいくつかの基本的な知識が必要です。

3. WordPress Infinite Scroll – Ajax Load More：

ajaxの読み込みを増やす

Ajax Load moreは、WordPressユーザー向けに特別に作成されているため、Webサイトをスムーズにスクロールできます。 Ajaxの読み込みは、怠惰な投稿、単一の投稿、ページ、コメントの読み込みに役立ちます。これらのプラグインは、WooCommerceのようなeコマースプラグインで最もよく知られています

4.簡単でスムーズなスクロールリンク：

簡単でスムーズなスクロールリンク

独自に下から上への機能を作成できます。 SEasy Smooth Scroll Linksはカスタマイズ可能で、非常に軽量なプラグインだからです。

スクロールアップ要素を設定するには、画像のいずれかを選択する必要があります。また、エレメントの位置を左、中央、右側に調整できます。このプラグインもオープンソースソフトウェアです。

5. MouseWheelスムーズスクロール：

マウスホイールのスムーズスクロール

MouseWheel Smooth Scrollプラグインは、すべてのアンカーリンクを非常にスムーズにスクロールできます。通常は右側に配置され、ページを下から上にスクロールします。

したがって、このプラグインはRTLをサポートし、WordPressダッシュボードに不要なメニュー項目を作成しません。

6. WPOSによるスムーズスクロール：

wposによるスムーズなスクロール

WPOSプラグインによるSmoothScrollは軽量であるため、すべてのページで上から下へのスクロールを簡単にカスタマイズできます。 1行のコードでも書く必要はありません。

必要に応じて、アニメーションの速度、タイプ、高さ、幅などを調整できます。このプラグインは、Elementorページビルダーでより適切に機能します

7.トップボタンへの単純なスクロール：

トップボタンへのシンプルなscrool

アンカーリンクにスムーズなスクロール効果を追加できますが、同じページにあります。この効果は、投稿とページ全体、または特定の投稿とページに適用できます。この設定は、ダッシュボード設定>>単純な[一番上までスクロール]ボタンにあります。

–すべての投稿とページに申し込むために選んでください
–ホームページのみを選択
–特定のページのみを選択してください
–特定の投稿のみを選択してください
–スクロールの速度を決定します

8. NSスムーズスクロールしてトップに戻る：

NSスムーズスクロールトップに戻る

Surbmaにはよりアクティブなユーザーがいます。このプラグインもスムーズなスクロールです。あなたはあなたのウェブサイト上のすべてのアンカーリンクに効果を得ることができます。スムーズなスクロール効果は、メニューまたは任意のナビゲーション部分に追加できます。

このプラグインにはオプションがないため、カスタマイズする必要はありません。 JavaScriptとWordPressプログラミングに関する知識と経験がある場合は、必要に応じていくつかの変更を加えることができます。ただし、お持ちでない場合は、触れないことをお勧めします。インストール後すぐに動作を開始します。

9. WPFrontスクロールトップ：

wpfrontスクロールトップ

WPFront Scroll Top Pluginを使用して、下から上に簡単にスクロールできます。さまざまなオプションから選択して完全にカスタマイズできます。一部のアニメーションでは、上にスクロールして戻ります。
テキスト、画像、ボタンを自分で作成できます。また、ページや投稿をフィルタリングすることもできます。

10.無限スクロールをキャッチ：

無限のスクロールをキャッチ

キャッチインフィニットスクロールは、ウェブサイトでのユーザーエンゲージメントを高めるのに役立ちます。その背後にある主な理由は、Jetpackの無限スクロールです。プラグインをインストールしてアクティブ化すると、顧客とユーザーはWebサイトページをスクロールできるようになります。

これらはすべて、トップの無料のWordPress Smooth Scroll Plugins2022です。