如何使用jQuery實現頁面的平滑滾動-js教程-PHP中文網

如何使用jQuery實現頁面的平滑滾動

不言

發布： 2021-04-26 17:18:45

原創

5484 人瀏覽過

使用jQuery實作頁面平滑捲動的方法：先開啟對應的程式碼檔案；然後使用jQuery的動畫標籤來實現平滑滾動即可。

如何使用jQuery實現頁面的平滑滾動

本教學操作環境：windows7系統、jquery3.2.1版、Dell G3電腦。

平滑滾動是指在頁面內滾動的行為，在網頁中，我經常會看到諸如“返回頂部”之類的按鈕，這就是使用平滑滾動實現的，接下來的這篇文章我們就來介紹使用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程式碼