2分SHAREツイートシェアはてブGoogle+PocketLINEこんにちは、タクゾウです。仕事で使える、ヘッダ固定・レプポンシブに対応したアンカーリンクをスムーススクロール方法を紹介したいと思います。目次アンカーリンクをスムーススクロールさせるコード使用方法コード説明リサイズ対応させる処理アンカーリンクをスムーススクロースさせる処理アンカーリンクをスムーススクロールさせるコードわかりやすいようにコメント多めで書いています。固定しているheaderのidかclass名(引数に入れない場合は0になります。smoothScroll()で関数をよびだし、引数に必要な数値を入力するだけです。第1引数:smoothSpeedスムーススクロールにかかる時間です。500くらいがベストです。「class」名を指定してください。(例:”#sample”)リサイズ時にも対応しているので、レスポンシブサイトでも問題なく動きます。MEMO固定ヘッダがない場合は第2引数をしていしないでください。コード説明リサイズ対応させる処理PCとSP(スマートフォン)でヘッダの高さが変わることがほとんどなので、リサイズ処理によって、「headerHeight」を変更する処理をしています。200);});MEMOリサイズ処理は、PCの負担を考えて、リサイズ操作が終わった時に処理が走る実装にしています。「speed」変数にスムーススクロールにかかる時間を設定してあげ、hrefに「#」が指定してあるリンクをクリックした場合に、アンカーリンク先の要素にanimateで移動させる処理をしています。false;});Web制作を勉強している人の参考になれば幸いです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。前の記事jQueryで背景画像にも対応したパララックス(視差効果)を作...次の記事デザイン参考になる種類別のWebページ一覧:「3D表現系」このブログの運営者どうもタクゾウです。このブログは、Web系フロントエンジニアが日々学んだことをまとめて行くブログです。基本的に自分が読み返すようで投稿してますが内容は誰がみてもわかりやすいよう書いています!よろしくお願いします!人気の記事1Wix(ウィックス)はビジネス向きではない。