Faites défiler vers le haut de la page à l'aide de JavaScript/jQuery?

J'ai un <button> sur la page, lorsque ce bouton est pressé caché <div> est indiqué à l'aide de jQuery.

Comment faire défiler vers le haut de la page à l'aide d'un JavaScript/jQuery commande dans cette fonction? Il est souhaitable, même si la barre de défilement instantanément saute vers le haut. Je ne suis pas à la recherche pour un défilement lisse.

InformationsquelleAutor KingNestor | 2009-07-17

1972

Si vous n'avez pas besoin de le changer pour animer, alors vous n'avez pas besoin d'utiliser toute spéciale plugins - je venais d'utiliser le JavaScript natif de la fenêtre.scrollTo méthode, en passant 0,0 permettra de faire défiler la page vers le 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.
- C'était mon point de vue, si vous n'avez pas besoin d'animer le défilement régulier, alors vous n'avez pas besoin d'utiliser jQuery.
- Drôle comme jeff commentaire est honnêtement pour les gens qui veulent juste des choses à travailler de la croix-navigateur 95% du temps, faut juste utiliser jQuery. Cela vient de quelqu'un qui a beaucoup écrire du javascript dès maintenant, parce que nous ne pouvons pas se permettre les frais généraux d'une bibliothèque de ralentir code d'annonce 🙁
- Cette réponse n'a rien à voir avec la question. Il serait très bien si la question était: Quel script et méthodes dois-je utiliser pour faire défiler vers le haut de la page? Bonne réponse est ici: stackoverflow.com/questions/4147112/...
- Pas de travail pour moi dans Firefox 30 et Chrome 36.
- De travail pour moi dans Firefox 40 et Chrome 44 (à l'adresse de Mikhaïl du commentaire)
- et si je veux faire défiler vers le bas de la page ?
- Faites défiler vers le bas de la page window.scrollTo(0, document.body.scrollHeight);
InformationsquelleAutor daniellmb
1278

Si vous ne voulez défilement lisse, essayez quelque chose comme ceci:
```
$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});
```
Qui prendra toute <a> balise dont href="#top" et la rendre lisse de défilement vers le haut.
- +1. Je me demandais juste comment faire quelque chose comme ça, et google me conduire ici. QUestion de bien, où est "scrollTop" fonction dans les docs? Je viens de regardé, mais ne pouvais pas le trouver.
- scrollTop n'est pas la fonction, c'est une propriété de l'élément de fenêtre
- api.jquery.com/scrollTop pour jQuery scrollTop()
- Cela ne fonctionne pas correctement lors de l'utilisation d'animer complète de rappel, comme il va l'exécuter deux fois.
- $("html, body").animate({ scrollTop: 0 }, "slow"); travaille
- Savez-vous pourquoi il est nécessaire d'ajouter le html & corps dans le sélecteur?
- Il n'est pas nécessaire, consultez stackoverflow.com/a/16430109/544283.
- Si vous avez ajouté le code html pour le sélecteur parce que, bien que par défaut c'est dans le corps, il peut être déplacé à l'extérieur, pour le html?
- "html" et du "corps" sont tous deux nécessaires pour la compatibilité du navigateur, c'est à dire Chrome v27 défile avec juste de "corps" et IE8 ne le fait pas. IE8 défile avec juste "html", mais Chrome v27 ne le fait pas.
- En fait, window.pageYOffset serait la propriété de l'élément de fenêtre de l'objet.
InformationsquelleAutor Mark Ursino
159

Essayez ceci pour défiler sur le dessus
```
<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>
```
- c'est la même chose: si ('scrollRestoration" de l'histoire) { histoire.scrollRestoration = 'manuel'; }
InformationsquelleAutor mehmood
94

Vous n'avez pas besoin de jQuery pour ce faire. Un standard de la balise HTML suffira...
```
<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>
```
- +1 C'est bien si vous avez besoin d'accéder à l'élément spécifique plutôt juste au-dessus.
- L'utilisation de '<a href="#">en Haut</a>' pour sauter vers le haut de la page.
- Cela semble être la meilleure façon d'aller lorsqu'ils traitent avec des SPAs
- Nice! Est-il un moyen pour la rendre lisse de défilement ?
InformationsquelleAutor Mathew
58

Toutes ces suggestions de travail idéal pour diverses situations. Pour ceux qui trouvent cette page en faisant une recherche, on peut aussi donner cette un essai. JQuery, pas de plug-in, faites défiler jusqu'à l'élément.
```
$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);
```
InformationsquelleAutor D.Alexander
49

Meilleure solution avec une animation fluide:
```
//this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });
```
Référence: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example
- Très propre et simple, merci!
- Vous pouvez encore avoir besoin de polyfill de soutien pour la ScrollOptions (pour certains navigateurs): github.com/iamdustan/smoothscroll
- J'aime cette solution beaucoup.
InformationsquelleAutor Ganesh Ghalame

de défilement fluide, pure javascript:

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

InformationsquelleAutor wake-up-neo

<script>

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

en html

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

InformationsquelleAutor hasancse016

27

Si vous voulez faire le défilement régulier, s'il vous plaît essayez ceci:
```
$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});
```
Une autre solution est JavaScript fenêtre.scrollTo méthode :
```
 window.scrollTo(x-value, y-value);
```
Paramètres :
- valeur x est le pixel le long de l'axe horizontal.
- valeur de y est le pixel le long de l'axe vertical.
- copycat... voir les utilisateurs de réponses... C'est juste une compilation des meilleurs 2 réponses....
- c'est un moyen légitime d'utiliser stackoverflow - il est plus pratique de l'avoir en un seul endroit. Joel Spolsky utilisé de ré-utiliser les réponses existantes comme un exemple de la façon dont stackoverflow est censé travailler à un point. Si vous êtes intéressés, je peux essayer de trouver le post de blog
InformationsquelleAutor Gaurang Sondagar
24

Avec window.scrollTo(0, 0); est très rapide

j'ai donc essayé la Marque Ursino exemple, mais dans Chrome rien ne se passe

et j'ai trouvé ce
```
$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});
```
testé tous les 3 navigateurs et il fonctionne

je suis l'aide de blueprint css

c'est lorsqu'un client clique bouton "Réserver maintenant" et qui n'ont pas de période de location choisie, se déplace lentement vers le haut où les calendriers et ouvre une boîte de dialogue div pointant vers les 2 champs, après 3sec il s'estompe
- Merci pour le tuyau, vous avez besoin de cibler à la fois html et le corps. Je ne faisais que pour le html et vous demandez-vous pourquoi il n'a pas de travail dans le navigateur Chrome.
- Le corps de l'animation fonctionne dans Safari, donc je suis à jour votre réponse en conséquence.
- "Testé tous les 3 navigateurs"? Midori, LuaKit et Konqueror, droit? :p
- Pourquoi ne pas simplement faire $('html', 'body').animate({scrollTop:0}) au lieu de l'ajout de deux lignes?
InformationsquelleAutor Luiggi ZAMOL
24

Vraiment étrange: Cette question est active depuis cinq ans maintenant et il n'y a pas encore de vanille JavaScript réponse à animer le défilement... Donc, ici, vous allez:
```
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 envelopper ce dans une fonction et l'appel à l'aide de la onclick attribut. Cochez cette jsfiddle

Note: Ceci est un très solution de base et peut-être pas les plus performantes. Un très élaboré exemple peut être trouvé ici: https://github.com/cferdinandi/smooth-scroll
- La question demande explicitement un jQuery solution si. donc, ce n'est pas étrange
- La meilleure solution pour moi. Pas de plugins, pas encombrant bibliothèque jquery juste simple javascript. Bravo
InformationsquelleAutor AvL
22

Un beaucoup de les utilisateurs vous recommandons de sélectionner à la fois le html et les balises de corps pour la compatibilité inter-navigateurs, comme suit:
```
$('html, body').animate({ scrollTop: 0 }, callback);
```
Ce voyage, vous pouvez néanmoins, si vous comptez sur votre rappel exécute qu'une seule fois. Il sera en fait exécuter deux fois parce que vous avez sélectionné au moins deux éléments.

Si c'est un problème pour vous, vous pouvez faire quelque chose comme ceci:
```
function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    $('body').animate({ scrollTop: 0 }, callback);
}
```
La raison pour laquelle cela fonctionne est en Chrome $('html').scrollTop() retourne 0, mais pas dans les autres navigateurs tels que Firefox.

Si vous ne voulez pas attendre pour l'animation complète dans le cas où la barre de défilement est déjà au dessus, essayez ceci:
```
function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}
```
InformationsquelleAutor David Kennedy
20
```
<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>
```
Edit:
```
$('html, body').animate({scrollTop:(scroll_pos)}, 2000);
```
- Êtes-vous sûr de la durée comme une chaîne de caractères en fonction animate œuvres?
- Vous ne pouvez pas utiliser une chaîne de caractères pour la durée dans le animate fonction, vous devez plutôt utiliser: $('html, body').animate({scrollTop:(scroll_pos)}, 2000);
- Quel est le point d'emballage de 0 dans la parenthèse? ((0)) sera tout simplement évaluer à 0.
- Oui @Jack, vous pouvez.
InformationsquelleAutor Kamlesh
18

L'ancien #top peut faire l'affaire
```
document.location.href = "#top";
```
Fonctionne bien dans les FF, IE et Chrome
- Nice! Est-il un moyen pour la rendre lisse de défilement ?
- vous devriez éviter de navigation en fonction des solutions, voir les commentaires sur le Sriramajeyam de réponse.
InformationsquelleAutor pollirrata

Essayer cette

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

InformationsquelleAutor Renjith

14

$(document).scrollTop(0); fonctionne également.
- Notez que lorsque vous n'utilisez pas Firefox cela ne fonctionnera pas. Vous obtenez un message d'erreur lorsque seulement de donner un argument (Erreur: Pas assez d'arguments [nsIDOMWindow.scrollTo]).
InformationsquelleAutor Hari Ganesan

Non-jQuery /solution JavaScript:

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

InformationsquelleAutor tfont

JS:

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

CSS:

.section{
 height:400px;
}
.section1{
  background-color: #333;
}
.section2{
  background-color: red;
}
.section3{
  background-color: yellow;
}
.section4{
  background-color: green;
}
.scrolltop{
  position:fixed;
  right:10px;
  bottom:10px;
  color:#fff;
}

HTML:

<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>

</body>
</html>

Alors que ce code peut répondre à la question, en fournissant des informations sur comment et pourquoi il résout le problème améliore sa valeur à long terme
Expliquez votre réponse!
Dans la page web à tout utilisateur va cliquer sur faites défiler de haut en bouton, puis ensuite la page de défilement de haut en haut avec de l'animation.

InformationsquelleAutor arvinda kumar

11

Cela fonctionne:

window.scrollTo(0, 0);

InformationsquelleAutor Santosh Jadi
10

Essayez ce code:
```
$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);
```
div => Dom Élément sur lequel vous souhaitez déplacer les faire défiler.

temps => millisecondes, définir la vitesse de défilement.

InformationsquelleAutor Wasif Ali
8

Pourquoi ne pas utiliser JQuery intégré la fonction scrollTop :
```
$('html, body').scrollTop(0);//For scrolling to top

$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom
```
Court et simple!
- Vous êtes en manque juste le lien la doc
InformationsquelleAutor Sandeep Gantait

Simplement utiliser ce script pour faire défiler vers le haut direct.

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

InformationsquelleAutor Gayashan Perera

7

Vous n'avez pas besoin de JQuery. Simplement, vous pouvez appeler le script
```
window.location = '#'
```
sur cliquez sur "Aller au dessus de la touche""

Échantillon de démonstration:

output.jsbin.com/fakumo#

PS: Ne pas utiliser cette approche, lorsque vous êtes en utilisant des bibliothèques comme angularjs. Qui pourrait cassé l'URL hashbang.
- cela fonctionne dans tous les principaux navigateurs?
- Malheureusement, ce n'est pas la meilleure solution car vous modifiez l'emplacement physiquement dans ce cas, plutôt que de faire défiler la page. Qui pourrait poser des problèmes si l'emplacement est important (dans le cas de l'utilisation Angulaire de routage ou de manière)
- est correcte. Alors que les peut de travail dans les cas simples, je ne recommande pas cette solution. L'emplacement est en train de devenir de plus en plus important et unique page apps utilisent largement la valeur de hachage pour gérer la navigation. Vous serait immédiatement introduire un effet secondaire d'un bug lors de l'ajout de hachage en fonction de navigation après cette ou cette de hachage en fonction de navigation.
InformationsquelleAutor Sriramajeyam Sugumaran
6

Si vous ne voulez pas de défilement lisse, vous pouvez tricher et arrêter le défilement lisse animation assez bien dès que vous commencez à elle... comme:
```
   $(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 n'ai aucune idée si c'est recommandé ou autorisé, mais il fonctionne 🙂

Quand souhaitez-vous l'utiliser? Je ne suis pas sûr, mais peut-être lorsque vous souhaitez utiliser un seul clic pour animer une chose avec Jquery, mais faire un autre sans animation? ie ouvrir un glisser-dans l'admin panel de connexion en haut de la page, et de sauter vers le haut pour le voir.

InformationsquelleAutor Jon Story
6

Motivation

Cette solution simple fonctionne en mode natif et met en œuvre un défilement fluide à n'importe quelle position.

Il évite l'utilisation de l'ancre des liens (ceux avec #) qui, à mon avis, sont utiles si vous souhaitez mettre un lien vers un article, mais ne sont pas aussi à l'aise dans certaines situations, en particulier lorsque pointant vers le haut qui pourrait conduire à deux Url différentes pointant vers le même emplacement (http://www.example.org et http://www.example.org/#).

Solution

Mettre un id à la balise que vous souhaitez faire défiler jusqu'à, par exemple, si votre premier section, qui répond à cette question, mais la id peut être placé partout dans la page.
```
<body>
  <section id="top">
    
  </section>
  <div id="another"></div>
```
Puis, comme un bouton, vous pouvez utiliser un lien, il suffit d'éditer le onclick attribut avec un code comme celui-ci.
```
<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>
```
Où l'argument de document.getElementById est le id de la balise que vous souhaitez faire défiler jusqu'à après cliquez sur.
- Grâce à vous! est excellente solution
- de vous souhaiter la bienvenue, je l'ai trouvé sur MDN, donc merci à Mozilla. C'est impressionnant comment beaucoup de choses sont déjà là, pris en charge en mode natif. J'aime la vanille JS.
InformationsquelleAutor Gianluca Casati
5

Vous pouvez simplement utiliser une cible à partir de votre lien, comme #someid, où #someid est le div id.

Ou, vous pouvez utiliser n'importe quel nombre de défilement des plugins qui le rendre plus élégant.

http://plugins.jquery.com/project/ScrollTo en est un exemple.

InformationsquelleAutor ScottE

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

Ajouter le "haut" bouton 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>

InformationsquelleAutor asertym

function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}

InformationsquelleAutor Mardzis

4

Aucune des réponses ci-dessus va travailler dans SharePoint 2016.

Il doit être fait comme ceci : https://sharepoint.stackexchange.com/questions/195870/
```
var w = document.getElementById("s4-workspace");
w.scrollTop = 0;
```
InformationsquelleAutor jeancallisti

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);
        }

InformationsquelleAutor Anh Tran

Essayer cette

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

InformationsquelleAutor Eugeni Bejan

Si vous souhaitez faire défiler jusqu'à n'importe quel élément avec un ID, essayez ceci:

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 700, 'swing', function () {
        window.location.hash = target;
    });
});``

InformationsquelleAutor Alan Kael Ball

Lorsque la crosse est en haut à moins de limiter le bas et du bas vers le haut faire défiler en-Tête est Collante. Ci-Dessous Voir Tripoter Exemple.

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/

InformationsquelleAutor Musaib Memdu

Juste Essayer, pas besoin de plugin /cadres

JS:

document.getElementById("jarscroolbtn").addEventListener("click", jarscrollfunction);

function jarscrollfunction() {
  var body = document.body; //For Safari
  var html = document.documentElement; //Chrome, Firefox, IE and Opera 
  body.scrollTop = 0; 
  html.scrollTop = 0;
}

HTML:

<button id="jarscroolbtn">Scroll contents</button>

CSS:

html, body {
  scroll-behavior: smooth;
}

InformationsquelleAutor rajmobiapp

Pour le défilement de l'élément et l'élément en haut de la page

WebElement tempElement=driver.findElement(By.cssSelector("input[value='Excel']"));

            ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", tempElement);

InformationsquelleAutor Priyanka

0

document.getElementById("id of what you want to scroll to").scrollIntoView();

InformationsquelleAutor GameMaster1928
-1

Curieusement, la plupart de ces ne fonctionne pas pour moi du TOUT, j'ai donc utilisé jQuery-ScrollTo.js avec cette:
```
wrapper.find(".jumpToTop").click(function() {
    $('#wrapper').ScrollTo({
        duration: 0,
        offsetTop: -1*$('#container').offset().top
    });
});
```
Et cela a fonctionné. $(document).scrollTop() était de retour 0, et celui-ci a effectivement travaillé à la place.

InformationsquelleAutor EpicPandaForce

Vous devez vous connecter pour publier un commentaire.

Motivation

Solution