外部ページでもスムーズスクロール

外部ページでもスムーズスクロール

お知らせのスクロールがうまく動かなかったとき、HTMLに下記のコードを入れたら動きました。
smoothスクロール使ってません。

外部ページでもスムーズスクロール

ページ内リンクではなく、外部ページでもスムーズスクロールする方法。

  • ページ内リンクと同様にスクロールさせることができる要素が html か body かを判定
  • # 記号に続くURL の部分(ハッシュ)を「window.location.hash」で取得
  • ハッシュが空文字でなければ、それを元にそのポジションを取得(下記の場合は 100px 上に調整)
  • animate() でアニメーション

事例 https://megumi-c.com/news.html#nw2

注意する点としては、ページ内リンクの場合はページが全て読み込まれている(jQuery の処理なども終了している)が、外部ページの場合は記述する位置によっては、他の jQuery の処理などに影響されて期待した位置にスクロールされない可能性がある。その場合は、記述する位置を最後の方に移して見るのも1つの方法。

window.location / MDN

参照 https://www.webdesignleaves.com/wp/jquery/573/