アンカーリンクをクリックするとスムーズにスクロールし、自由にトップ位置に調整できます。 1. アンカー ポイントを追加します。a タグでは href ではなく nacTo が使用されることに注意してください。 <ul> <li><a class="anchor" navTo="one">ターゲットの選択</a></li> <li><a class="anchor" navTo="two">ターゲット顧客</a></li> <li><a class="anchor" navTo="three">広告フォーマット</a></li> <li><a class="anchor" navTo="four">広告</a></li> <li><a class="anchor" navTo="five">予算とスケジュール</a></li> <li><a class="anchor" navTo="six">コンバージョン トラッキング</a></li> </ul> 2. 右にスクロールする必要があるコンテンツに対応するIDを追加します。 <div class="right"> <div id="1"> <div class="target"> <i>あなたの目標は次のとおりです:</i> <div class="brand_engagement"><img src="img/signal.png" /><i>ブランドエンゲージメント</i><b>変化</b></div> <p>自分のビジネスについて人々に知ってもらいたいです。 </p> <div class="advertising_that"> <img src="img/right.png" /> 広告は、広告を閲覧する可能性が最も高い適切なユーザーに表示されます。 </b> </div> </div> </div> <div id="2"> コンテンツの第2部 </div> <div id="3"> コンテンツの第3部 </div> <div id="4"> コンテンツの第4部 </div> <div id="5"> コンテンツの第5部 </div> </div> 3. 上部の距離までスムーズにスクロールするための js を追加します (150 はナビゲーションの高さで、必要に応じて自由に調整できます) $('.anchor').click(関数() { var navto = $(this).attr('navto'); if (navto != "#") { var $div = $('#' + navto); var top = $div.offset().top || 0; $('html,body').animate({ 'スクロールトップ': 上 - 150 }, 500); } それ以外 { $('html,body').animate({ 'スクロールトップ': 0 }, 500); } }); OK〜エフェクト表示 JS のアンカーリンクをクリックして自由にトップ位置を調整する場合のスムーズスクロールに関するこの記事はこれで終わりです。より関連性の高い js アンカーリンクスムーズスクロールコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL データベースを最適化する 8 つの方法の詳細な説明 (必読の定番)
>>: Linux での i3 ウィンドウ マネージャーの設定と使用に関するチュートリアル
1.コンテナ内の /etc/hosts、/etc/resolv.conf、/etc/hostname...
目次制御されていないコンポーネント制御コンポーネント知らせ結論は制御されていないコンポーネントフォー...
目次分離効果コマンドラインの説明関与する機能分離効果-- 別居前1,2,3,4 -- 別居後1 2 ...
MySQL をクリーンアンインストールします。個人的にテストしたところ、今回はようやくうまくいきま...
最近はWeb2.0という言葉をよく耳にしますが、Web2.0とは何でしょうか? Web 1.0 とど...
このブログでは、Docker をインストールするプロセスを簡単な手順で説明します。Docker のイ...
序文多くの場合、ユーザーが自分のデータに対して実行する操作に基づいて何かを行う必要があります。たとえ...
目次親コンポーネントリストボックスリストコンポーネントボタンコンポーネント PageButton昨年...
コードをコピーコードは次のとおりです。 <!DOCTYPE html> <html...
データベースでは、UNION キーワードと UNION ALL キーワードの両方が 2 つの結果セッ...
質問コードにはプロンプトがありません: RN 開発に不慣れな、フロントエンド以外の学生の多くは、「ど...
コンテナ間の通信1. コンテナのネットワーク共有このモードの Docker コンテナはネットワーク ...
目次概要計算された監視プロパティを監視する要約する概要Vue プロジェクトでは、computed と...
Vue でのコードの再利用により、mixnis が提供されます。テンプレートの再利用により、スロット...
目次ネスティング親子コンポーネント通信ブラザーコンポーネント通信撤回するReact の Linked...