Maison > Article > interface Web > Comment obtenir l'effet de retour au sommet dans JS

Comment obtenir l'effet de retour au sommet dans JS

亚连original: 2018-06-14 17:28:021291parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter un flux de cascade à disposition aléatoire dans ionic3Article suivant：Comment implémenter un flux de cascade à disposition aléatoire dans ionic3

Articles Liés

Voir plus