jQuery メモ　scroll

CSSで簡単に実装する

細かい指定はできない（対象場所やスピード等）

html{
  scroll-behavior: smooth;
}

---

スクロール場所を変更する

ヘッダー固定で隠れてしまう時など

html｛
scroll-padding-top: 80px;
｝

三項演算子

const target = jQuery("#" == id ? "html" : id); の部分は、三項演算子を使用して条件に基づいて target 変数に値を代入しています。
この記述は、id が "#" の場合にはページの最上部を、そうでない場合には指定された要素を target として設定するために使われています。これにより、スムーズスクロールのターゲットを動的に決定することができます。

三項演算子の構文

条件 ? 真の場合の値 : 偽の場合の値

このコードの解説

1. 条件: "#" == id

• これは、id が "#" と等しいかどうかをチェックしています。

• 真の場合の値: "html"

• 条件が真（id が "#" の場合）であれば、target には "html" が代入されます。これは、ページの最上部を指します。

3. 偽の場合の値: id

• 条件が偽（id が "#" でない場合）であれば、target には id の値がそのまま代入されます。これは、特定の要素のIDを指します。

jQuery("a[href^='#']").on("click", function(e) {
  // スクロールの速さを300ミリ秒に設定
  const speed = 300;
  // クリックしたリンクのhref属性を取得
  const id = jQuery(this).attr("href");
  // ターゲットを決定（hrefが#の場合はhtmlを、そうでなければそのIDを使用）
  const target = jQuery("#" == id ? "html" : id);
  // ターゲットの位置を取得
  const position = jQuery(target).offset().top;
  // スクロールアニメーションを実行
  jQuery("html,body").animate(
    {
      scrollTop: position, // スクロールする位置
    },
    speed, // スクロールの速さ
    "swing" // アニメーションの動き
  );
});

---

^

は正規表現において「先頭」を意味します。具体的には、a[href^='#'] の部分は、href 属性が # で始まるすべての <a> 要素を選択するためのセレクタです。

以下のように解釈できます：

• a は <a> タグを指します。

• [href^='#'] は href 属性が # で始まる要素を選択します。

このセレクタを使うことで、ページ内リンク（例えば、特定のセクションにスクロールするためのリンク）を簡単に選択し、イベントリスナーを追加することができます。

jQuery("a[href^='#']").on("click",function(e){