[jQuery]animateとscrollTopメソッドで画面の指定位置までスクロールする

2022年8月4日

環境

Google Chrome 104.0.5112.80
Windows 10 Home 64bit
jQuery 3.6.0

構文
const 指定位置の変数名 = $('#セレクタID名’).offset().top;
const 移動スピード変数名 = 値

$("html,body").animate({scrollTop:指定位置変数名},移動スピード変数名);
animateメソッドを使って画面が取得した位置までアニメーションを伴って移動します。

使用例

<!DOCTYPE html>
<html>
  <body>
    <p>test data AA</p>
      <p>test data BB</p>
    <p id="cft">東京大阪</p>
    <input type="button" id="btnshow" value="表示" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $("#btnshow").click(function () {
       
       /*要素の位置を取得*/
       const position = $('#cft').offset().top;
       
       /*移動するスピードを設定*/
       const speed = 300;
       
       /*アニメーションを設定*/
       $("html,body").animate({scrollTop:position},speed);
      
      });
    </script>
  </body>
</html>

結果
「表示」ボタンを押すと画面がdiv要素「cft」までスクロールします。

jQuery

Posted by arkgame

Related posts: