How to use jQuery to achieve smooth scrolling of the page-JS Tutorial-php.cn

How to use jQuery to achieve smooth scrolling of the page

不言

Release： 2021-04-26 17:18:45

Original

5506 people have browsed it

How to use jQuery to achieve smooth scrolling on the page: first open the corresponding code file; then use jQuery's animation tag to achieve smooth scrolling.

How to use jQuery to achieve smooth scrolling of the page

The operating environment of this tutorial: Windows 7 system, jquery version 3.2.1, Dell G3 computer.

Smooth scrolling refers to the behavior of scrolling within the page. In web pages, I often see buttons such as "Return to Top". This is achieved using smooth scrolling. The following article Let’s introduce how to use jQuery to achieve smooth scrolling.

How to achieve smooth scrolling

The How to use jQuery to achieve smooth scrolling of the page code is as follows

$(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;
  });
});

Copy after login

The above code can achieve smooth scrolling, you can change the "speed" to change the scroll speed, plus, by returning "false" at the end, we try not to affect the URL.

Since WordPress conflicts with "$", we change "$" to "jQuery", below we use jQuery's animation tag to achieve smooth scrolling.

Let’s look at specific examples

The code is as follows

HTML code

<!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>

Copy after login

CSS code

div{
 height: 1000px;
}

Copy after login

The running results are as follows: only the above part is screenshot, and there are sample1, sample2, sample3, and sample4 below.

How to use jQuery to achieve smooth scrolling of the page

The above is the detailed content of How to use jQuery to achieve smooth scrolling of the page. For more information, please follow other related articles on the PHP Chinese website!