javascript - retour - scroll to top jquery




Faites défiler vers le haut de la page en utilisant JavaScript/jQuery? (20)

Active tous les navigateurs. Bonne chance

var process;
        var delay = 50; //milisecond scroll top
        var scrollPixel = 20; //pixel U want to change after milisecond
        //Fix Undefine pageofset when using IE 8 below;
        function getPapeYOfSet() {
            var yOfSet = (typeof (window.pageYOffset) === "number") ? window.pageYOffset : document.documentElement.scrollTop;
            return yOfSet;
        }



        function backToTop() {
            process = setInterval(function () {
                var yOfSet = getPapeYOfSet();
                if (yOfSet === 0) {
                    clearInterval(process);
                } else {
                    window.scrollBy(0, -scrollPixel);
                }
            }, delay);
        }

J'ai un <button> sur la page, quand ce bouton est enfoncé, un <div> caché est affiché en utilisant jQuery.

Comment puis-je faire défiler vers le haut de la page en utilisant une commande JavaScript / jQuery dans cette fonction? C'est souhaitable même si la barre de défilement saute instantanément vers le haut. Je ne cherche pas un défilement lisse.



Essaye ça

<script>
    $(window).scrollTop(100);
</script>

Essaye ça

<script>
  $(function(){
   $('a').click(function(){
    var href =$(this).attr("href");
   $('body, html').animate({
     scrollTop: $(href).offset().top
     }, 1000)
  });
 });
 </script>

L'ancien #top peut faire l'affaire

document.location.href = "#top";

Fonctionne bien dans FF, IE et Chrome


Lorsque le défilement du haut est inférieur à la limite inférieure et inférieur au défilement supérieur, l'en-tête est collant. Ci-dessous, voir l'exemple du violon.

var lastScroll = 0;

$(document).ready(function($) {

$(window).scroll(function(){

 setTimeout(function() { 
    var scroll = $(window).scrollTop();
    if (scroll > lastScroll) {

        $("header").removeClass("menu-sticky");

    } 
    if (scroll == 0) {
    $("header").removeClass("menu-sticky");

    }
    else if (scroll < lastScroll - 5) {


        $("header").addClass("menu-sticky");

    }
    lastScroll = scroll;
    },0);
    });
   });

https://jsfiddle.net/memdumusaib/d52xcLm3/


Si vous n'avez pas besoin de la modification pour animer, vous n'avez pas besoin d'utiliser de plugins spéciaux - j'utiliserais simplement la méthode JavaScript native.scrollTo - passer en 0.0 fera défiler la page en haut à gauche instantanément .

window.scrollTo(x-coord, y-coord);

Paramètres

  • x-coord est le pixel le long de l'axe horizontal.
  • y-coord est le pixel le long de l'axe vertical.

Si vous ne voulez pas défiler en douceur, vous pouvez tricher et arrêter l'animation de défilement lisse à peu près dès que vous démarrez ... comme ceci:

   $(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

Je ne sais pas si c'est recommandé / autorisé, mais ça marche :)

Quand utiliseriez-vous cela? Je ne suis pas sûr, mais peut-être quand vous voulez utiliser un clic pour animer une chose avec Jquery, mais en faire un autre sans animation? c'est-à-dire ouvrir un panneau d'ouverture de session d'administration en haut de la page, et sauter instantanément en haut pour le voir.


Si vous voulez faire un défilement régulier, essayez ceci:

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

Une autre solution est la méthode JavaScript window.scrollTo:

 window.scrollTo(x-value, y-value);

Paramètres :

  • La valeur x est le pixel le long de l'axe horizontal.
  • La valeur y est le pixel le long de l'axe vertical.

Si vous voulez un défilement régulier, essayez quelque chose comme ceci:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Cela prendra n'importe quelle balise <a> dont href="#top" et rendra le défilement fluide vers le haut.


Toutes ces suggestions fonctionnent très bien pour diverses situations. Pour ceux qui trouvent cette page grâce à une recherche, on peut aussi essayer. JQuery, pas de plug-in, faites défiler jusqu'à l'élément.

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

Utilisez simplement ce script pour faire défiler vers le haut directement.

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>

Vous n'avez pas besoin de jQuery pour le faire. Une balise HTML standard suffira ...

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

Vous pouvez essayer d'utiliser JS comme dans ce violon http://jsfiddle.net/5bNmH/1/

Ajoutez le bouton "Aller en haut" dans votre pied de page:

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>

Vraiment étrange: Cette question est active depuis cinq ans maintenant et il n'y a toujours pas de réponse JavaScript pour animer le défilement ... Alors voilà:

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

Si vous le souhaitez, vous pouvez l'inclure dans une fonction et l'appeler via l'attribut onclick . Vérifiez cette jsfiddle

Note: Ceci est une solution très basique et peut-être pas la plus performante. Un exemple très élaboré peut être trouvé ici: https://github.com/cferdinandi/smooth-scroll


défilement lisse, javascript pur:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

Cela fonctionnera:

window.scrollTo(0, 0);


Essayez ceci pour faire défiler vers le haut

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

en html

<a href="#top">go top</a>

<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>






scroll