HOMEjQuery【jQuery】ページ内リンクをス滑らかなムーズスクロールに変更する【jQuery】ページ内リンクをス滑らかなムーズスクロールに変更する2022.06.07jQueryBこんにちは、ryohei(@ityryohei)です!本記事では、jQueryを使ってページ内リンクをスムーズスクロールに変更する方法をご紹介しています。ページ内リンクを滑らかにスクロールするようにしたいんだけど、どうすればいいんだろう?上記の疑問にお答えします。jQueryを読み込む本記事の内容はjQueryを使用しているため、jQuery本体のファイルを読み込む必要があります。ここではCDNを利用してjQuery本来のファイルを読み込みます。Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワーク経由で提供されるウェブコンテンツを指します。ネットワークに接続されている機器であれば気軽に利用することができます。CDNには有料、無料のものがありますが、jQueryのライブラリファイルは無料で利用できます。jQueryの本体ファイルは下記の記述で読み込むことができます。src="https://code.jquery.com/jquery-3.6.0.js"></script>これで前準備が整いましたので、本題のスムーズスクロールを解説していきます。発着点とスクロールスピードを設定するまずはスクリプトをご紹介します。下記はid属性にbuttonという値を持つ要素をクリックすると、id属性にtargetを持つ要素の位置まで滑らかにスクロールするスクリプトです。});});</script>targetの変数に移動先の要素を指定します。#buttonにはクリックイベントを設定する要素をセレクターで指定します。要素とすることで、ボタンをクリックした際に指定した要素まで滑らかにスクロールすることができます。slowの部分にスクロールスピードを指定することができ、指定できる値には下記があります。1000)指定した発着点をHTMLで記述する今回はbuttonタグとh1タグを使って記述してみます。buttonタグをクリックするとh1タグの場所までゆっくりと移動するようにします。id="landing-point">ここまで移動する</h1>以下サンプルです。コピペでも動くと思いますので、さくっと実装したいときなどにお使い下さい。</body></html>Demoデモから動きが確認できます。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。