Home >Web Front-end >JS Tutorial >How to use jQuery to achieve smooth scrolling of the page

How to use jQuery to achieve smooth scrolling of the page

不言Original: 2018-12-26 16:43:555521browse

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.

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

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>

CSS code

div{
 height: 1000px;
}

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!

JavaScript jquery css html WordPress

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the id attribute in html? Use of id attributeNext article：What is the id attribute in html? Use of id attribute

See more

How to use jQuery to achieve smooth scrolling of the page

Related articles