Comment obtenir l'effet de retour au sommet dans JS-js tutoriel-php.cn

Comment obtenir l'effet de retour au sommet dans JS

亚连

Libérer： 2018-06-14 17:28:02

original

1322 Les gens l'ont consulté

Cet article est principalement destiné à chacun de détailler Il présente JS pour réaliser l'effet de retour en haut avec une animation, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à

L'exemple dans cet article partage avec vous l'implémentation spécifique de JS pour réaliser l'effet de retour en haut. avec animation. Le code est pour votre référence. Le contenu spécifique est le suivant

Fonction d'implémentation : Lors du défilement jusqu'à une certaine hauteur de la page, le bouton de retour en haut apparaît. Après avoir cliqué, il revient en haut de la page Web et le bouton est masqué.
Le code est le suivant. jQuery fait référence à Baidu CDN, alors copiez l'intégralité du code et exécutez-le dans le navigateur.

<!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>

Copier après la connexion

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Communication du composant Vue (tutoriel détaillé)

Analyse détaillée du code source de Vue Socket.io

Erreurs quotidiennes en Javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!