Heim > Artikel > Web-Frontend > So verwenden Sie jQuery, um ein reibungsloses Scrollen der Seite zu erreichen

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

不言Original: 2018-12-26 16:43:555500Durchsuche

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.

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

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>

CSS Code

div{
 height: 1000px;
}

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!

JavaScript jquery css html WordPress

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist das ID-Attribut in HTML? Verwendung des ID-AttributsNächster Artikel：Was ist das ID-Attribut in HTML? Verwendung des ID-Attributs

In Verbindung stehende Artikel

Mehr sehen