So erzielen Sie in JS den „Return to Top'-Effekt-js-Tutorial-php.cn

So erzielen Sie in JS den „Return to Top'-Effekt

亚连

Freigeben： 2018-06-14 17:28:02

Original

1386 Leute haben es durchsucht

Dieser Artikel ist hauptsächlich für alle zum Detail gedacht Es führt JS ein, um den Return-to-Top-Effekt mit Animation zu realisieren, der einen bestimmten Referenzwert hat.

Das Beispiel in diesem Artikel zeigt Ihnen die spezifische Implementierung von JS, um den Return-to-Top-Effekt zu realisieren mit Animation. Der spezifische Inhalt ist wie folgt:

Implementierungsfunktion: Beim Scrollen auf eine bestimmte Höhe der Seite erscheint die Schaltfläche „Zurück nach oben“. Nach dem Klicken kehrt es zum oberen Rand der Webseite zurück und die Schaltfläche wird ausgeblendet.
Der Code lautet wie folgt: jQuery bezieht sich auf Baidu CDN. Kopieren Sie also den gesamten Code und führen Sie ihn im Browser aus.

<!DOCTYPE html> 
<html> 
 
  <head> 
    <meta charset="UTF-8"> 
    <title>实现回到顶部功能</title> 
  </head> 
  <style> 
    * { 
      padding: 0; 
      margin: 0; 
    } 
     
    .gotop { 
      display: none; 
      position: fixed; 
      bottom: 50px; 
      right: 50px; 
      width: 40px; 
      height: 40px; 
      padding: 5px; 
      background-color: #F00; 
      color: #FFF; 
      text-align: center; 
      cursor: pointer; 
    } 
  </style> 
  <script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script> 
 
  <body> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> 
 
    <p id="goTop" class="gotop"> 
      <p>回到</p> 
      <p>顶部</p> 
    </p> 
  </body> 
  <script> 
    function goTop() { 
 
      $(window).scroll(function() { 
        var $scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //兼容浏览器 
        if($scrollTop > 100) { //滚动高度可调 
          $("#goTop").show(); 
        } else { 
          $("#goTop").hide(); 
        }; 
      }) 
 
      $("#goTop").on("click", function() { 
        $("body").stop().animate({ 
          scrollTop: 0 
        }); 
      }) 
 
    } 
 
    goTop(); 
  </script> 
 
</html>

Nach dem Login kopieren

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Vue-Komponentenkommunikation (ausführliches Tutorial)

Detaillierte Analyse des Vue Socket.io-Quellcodes

Tägliche Fehler in Javascript

Das obige ist der detaillierte Inhalt vonSo erzielen Sie in JS den „Return to Top'-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!