jQueryを使ってページのスムーズなスクロールを実現する方法-jsチュートリアル-php.cn

jQueryを使ってページのスムーズなスクロールを実現する方法

不言

リリース： 2021-04-26 17:18:45

オリジナル

5550 人が閲覧しました

jQuery を使用してページ上でスムーズなスクロールを実現する方法: まず、対応するコードファイルを開き、次に jQuery のアニメーションタグを使用してスムーズなスクロールを実現します。

jQueryを使ってページのスムーズなスクロールを実現する方法

このチュートリアルの動作環境: Windows 7 システム、jquery バージョン 3.2.1、Dell G3 コンピューター。

スムーズスクロールとは、Webページ内で「トップに戻る」などのボタンを見かけることがあります。これを実現するのが次の記事です。jQueryの使い方を紹介します。スムーズなスクロールを実現します。

スムーズなスクロールを実現する方法

jQueryを使ってページのスムーズなスクロールを実現する方法コードは次のとおりです。

$(function(){
  $(&#39;a[href^="#"]&#39;).click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? &#39;html&#39; : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

ログイン後にコピー

上記のコードはスムーズなスクロールを実現します。変更することもできます。スクロール速度を変更する「speed」を追加し、最後に「false」を返すことで、URL に影響を与えないようにしています。

WordPress は「$」と競合するため、「$」を「jQuery」に変更します。以下では、jQuery のアニメーションタグを使用してスムーズなスクロールを実現します。

具体的な例を見てみましょう

コードは次のとおりです

HTMLコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="sample.css" type="text/css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $(function(){
        $(&#39;a[href^="#"]&#39;).click(function() {
          var speed = 400; 
          var href= $(this).attr("href");
          var target = $(href == "#" || href == "" ? &#39;html&#39; : href);
          var position = target.offset().top;
          $(&#39;body,html&#39;).animate({scrollTop:position}, speed, &#39;swing&#39;);
          return false;
        });
      });
    </script>
    <title>jQuery</title>
  </head>
  <body>
    <h1 id="index">目录</h1>
    <ul>
      <li><a href="#1">sample1</a></li>
      <li><a href="#2">sample2</a></li>
      <li><a href="#3">sample3</a></li>
      <li><a href="#4">sample4</a></li>
    </ul>
    <div id="1">
      <h2>sample1</h2>
      <a class="button" href="#index">Topへ</a>
    </div>
    <div id="2">
      <h2>sample2</h2>
      <a class="button" href="#index">Topへ</a>
    </div>
    <div id="3">
      <h2>sample3</h2>
      <a class="button" href="#index">Topへ</a>
      </div>
    <div id="4">
      <h2>sample4</h2>
      <a class="button" href="#index">Topへ</a>
    </div>
  </body>
</html>

ログイン後にコピー

CSSコード