So verwenden Sie jQuery, um ein reibungsloses Scrollen der Seite zu erreichen-js-Tutorial-php.cn

So verwenden Sie jQuery, um ein reibungsloses Scrollen der Seite zu erreichen

不言

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

Original

5548 Leute haben es durchsucht

So verwenden Sie jQuery, um ein reibungsloses Scrollen auf der Seite zu erreichen: Öffnen Sie zuerst die entsprechende Codedatei und verwenden Sie dann das Animations-Tag von jQuery, um ein reibungsloses Scrollen zu erreichen.

So verwenden Sie jQuery, um ein reibungsloses Scrollen der Seite zu erreichen

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JQuery-Version 3.2.1, Dell G3-Computer.

Reibungsloses Scrollen bezieht sich auf das Verhalten beim Scrollen innerhalb der Seite. Auf Webseiten sehe ich oft Schaltflächen wie „Zurück zum Anfang“. Dieser Artikel folgt. Lassen Sie uns die Verwendung von jQuery vorstellen um ein reibungsloses Scrollen zu erreichen.

So erreichen Sie ein reibungsloses Scrollen

Der So verwenden Sie jQuery, um ein reibungsloses Scrollen der Seite zu erreichen-Code lautet wie folgt

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

Nach dem Login kopieren

Der obige Code kann ein reibungsloses Scrollen erreichen, Sie können ihn ändern die „Geschwindigkeit“, um die Scroll-Geschwindigkeit zu ändern, und indem wir am Ende „false“ zurückgeben, versuchen wir, die URL nicht zu beeinflussen.

Da WordPress mit „$“ in Konflikt steht, ändern wir „$“ in „jQuery“. Nachfolgend verwenden wir das Animations-Tag von jQuery, um ein reibungsloses Scrollen zu erreichen.

Werfen wir einen Blick auf das spezifische Beispiel

Der Code lautet wie folgt

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>

Nach dem Login kopieren

CSS Code

div{
 height: 1000px;
}

Nach dem Login kopieren

Die laufenden Ergebnisse sind wie folgt: Es wird nur der obere Teil genommen, und darunter befinden sich Probe1, Probe2, Probe3 und Probe4.

So verwenden Sie jQuery, um ein reibungsloses Scrollen der Seite zu erreichen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie jQuery, um ein reibungsloses Scrollen der Seite zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!