(128) ページ内リンクをスムーズにスクロールさせたい。

投稿者: | 2022年3月12日

39 views

1. やりたいこと

ページ内リンクを押下時、ページ内移動をスムーズに見せたい。

2. やってみる

HTML

<a class="jumpitem" href="#ZZZ">LINK</a>

 :

<h1 id="ZZZ">Item 1</h1>

JavaScript

$('a.jumpitem').on('click',function(){
  var id = $(this).attr('href');

  // 移動先のY座標を取得
  var trgetPosY = $(id).offset().top;

  // スクロールして移動 (500ms)
  $('body,html').animate({scrollTop:trgetPosY}, 500, 'swing');

  return false;   // 勝手にジャンプさせない。
});

3. 参考情報

・elem.offset()は、document (=最上位の親要素)を原点とした指定要素の位置情報を返す。

Description: Get the current coordinates of the first element in the set of matched elements, relative to the document.

https://api.jquery.com/offset/


コメントを残す

メールアドレスが公開されることはありません。


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)