suchen

Heim >Web-Frontend >js-Tutorial >So erzielen Sie in JS den „Return to Top'-Effekt

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

亚连
亚连Original
2018-06-14 17:28:021388Durchsuche

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>

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!

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：So implementieren Sie einen Wasserfallfluss mit zufälligem Layout in ionic3Nächster Artikel：So implementieren Sie einen Wasserfallfluss mit zufälligem Layout in ionic3

In Verbindung stehende Artikel

Mehr sehen