Javascript Girl
  1. Javascript Girl
  3. Comment faire défiler vers le haut de la page en cliquant sur le bouton?
Intereting Posts
Rendre les polygones SVG dans la bibliothèque Javascript de Raphael Si hasClass, ajoutez Class au parent JsPdf en utilisant html2canvas.js pour exporter pdf de html ne fonctionne pas pour des données importantes Comment détecter l'événement de clic-bouton du navigateur en utilisant angulaire? Erreur "Impossible de lire les dépendances" avec npm Tell Iron Router ne intercepte pas un lien Comment puis-je dessiner les mêmes lignes du premier ordinateur sur un autre ordinateur? Attendez jusqu'à ce que l'image soit chargée avant d'effectuer une fonction La demande $ .getJSON se comporte d'une manière dont je ne suis pas clair. Vous ne savez pas comment formater la demande avec callback =? La méthode de remplacement Javascript, remplacer par "$ 1" Impossible de lire la «longueur» de la propriété de null (javascript) Supprimer les valeurs par défaut d'un objet Nodejs Socket raccroché & ECONNRESET – Demande de publication HTTP de Meteor to Node js server Comment mesurer le temps d'exécution du code javascript avec rappel Comment enregistrer les courriels aux abonnés avec la case à cocher?

Comment faire défiler vers le haut de la page en cliquant sur le bouton?

Je crée les pages de mes produits à l'aide du code de l'étiquette d'objet, mais chaque fois que je clique sur le bouton "voir", la page suivante reste à la même position de la page précédente que je viens de voir. Comment puis-je ajouter des fonctionnalités qui me permettront de voir depuis le haut de la page chaque fois que je clique sur le bouton "voir"? 

<div id="container" class="clearfix"><!--! end of #sidebar --> <div class="holder"></div> <div id="content" class="defaults"><!-- navigation holder --> <div id="title2">Office Section</div> <!-- item container --> <ul id="itemContainer"> <li> <div id="product"> <div id="title">FuBang®</div> <div class="imageOuter" style="margin:0"> <a class="image" href="officesection010.html"> <span class="rollover" ></span> <img class="imgborder" src="product/officesection/010.jpg" width="165" height="165" /> </a> </div><br /> <div id="text">Sofa </div><br /> <div id="button"> <a href="officesection010.html">View Details</a> </div> </div> </li> </ul> <br /> <div id="title2"></div> <div class="holder"></div> </div> </div> <!--! end of #content --> </div> <!--! end of #container -->

Lorsque je clique sur le bouton "Afficher les détails" à une position spécifique "x" ici: http://postimg.org/image/vgs0lwhtr/

La page suivante montre la même position "x", mais je veux qu'elle passe en haut de la page: http://postimg.org/image/vn80e2lph/

Utilisation de Javascript: 

 document.body.scrollTop = document.documentElement.scrollTop = 0;

Utilisation de jQuery: 

 $(function() { $('body').scrollTop(0); });

Parfois, la mise en boucle vers le corps ne fonctionne pas si votre contenu actuel est généré via jQuery (comme c'était le cas). Dans une telle situation, vous pouvez simplement faire la suite. 

 $(function() { $('html').scrollTop(0); }); 
 <a href="#" ID="backToTop"></a> jQuery(document).ready(function($){ $(window).scroll(function(){ if ($(this).scrollTop() > 50) { $('#backToTop').fadeIn('slow'); } else { $('#backToTop').fadeOut('slow'); } }); $('#backToTop').click(function(){ $("html, body").animate({ scrollTop: 0 }, 500); //$("html, body").scrollTop(0); //For without animation return false; }); });

Veuillez vous référer à cela , que cette aide

Un petit problème avec la solution jQuery de Subhash est que vous devez appeler ce code dans $(document).ready() afin que votre sélecteur $('body') fonctionne. L'événement ready peut ne pas déclencher avant que des parties de votre page ne soient rendues sur l'écran.

Une meilleure approche consiste à simplement modifier l'emplacement de l'utilisateur comme solution de travail à cette fonctionnalité du navigateur: 

 //Above all of your $(document).ready(...) code document.location = "#";

Solution HTML simple pour sauter entre les pièces de page 

 // Place a tag like this where you would like to go // in your case at the top <a name="top"></a> // you will reach there by click of this link better use an image reach their by clicking on this we can also use an image, align in right <a href="#top">last</a>

Le bouton Haut de la page, fonctionne dans tous les navigateurs. Pour changer la vitesse de défilement, il suffit de changer le x dans le counter -= x ici x = 10 

 function scrollToTop(){ var myBody = document.body; var id = setInterval(secondFunction,1); var height = window.pageYOffset; var counter = height; function secondFunction(){ if(window.pageYOffset == 0){ clearInterval(id); } else { if(!!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g)){ counter -= 10; counter--; document.documentElement.scrollTop = counter; } else { counter -= 10; counter--; myBody.scrollTop = counter; } } } } 
 body { height: 5000px; margin: 0; padding: 0; } .backToTop { position: fixed; /* Fixed at page */ top: auto; bottom: 20px; left: auto; right: 20px; background-color: crimson; color: white; padding: 5px; cursor: pointer; } header { position: relative; top: 0; left: 0; width: 100%; height: 100px; background-color: black; } 
 <!-- back to top button --> <span class="backToTop" onclick="scrollToTop()">TOP</span> <!-- Header --> <header> </header>

Affectez un id = "# body" et tabindex dans la <body> 

 <body id="#body" tabindex="1">

Et utiliser jquery focus () 

 $(function() { $("#body").attr("tabindex",-1).focus(); }

Vous pouvez utiliser cette méthode: 

 function gototop() { if (window.scrollY>0) { window.scrollTo(0,window.scrollY-20) setTimeout("gototop()",10) } }