Faire défiler un élément avec jQuery

Question

Faire défiler un élément avec jQuery

Demandé el 13 de Juillet, 2011: Quand la question a-t-elle été
590969 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai ceci input élément :

<input type="text" class="textfield" value="" id="subject" name="subject">

Ensuite, j'ai d'autres éléments, comme d'autres entrées de texte, des zones de texte, etc.

Lorsque l'utilisateur clique sur ce input con #subject la page devrait défiler jusqu'au dernier élément de la page avec une belle animation. Il doit s'agir d'un défilement vers le bas et non vers le haut.

Le dernier élément de la page est un submit bouton avec #submit :

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

L'animation ne doit pas être trop rapide et doit être fluide.

J'utilise la dernière version de jQuery. Je préfère ne pas installer de plugin mais utiliser les fonctionnalités par défaut de jQuery pour y parvenir.

Demandé el 13 de Juillet, 2011 par DiegoP.

12 votes

developer.mozilla.org/fr/US/docs/Web/API/Element/scrollIntoView

Commenté el 9 de Décembre, 2018 par Christophe Roussy

0 votes

scrollTo a été désactivé pour moi à cause d'un plugin de chrome, je ne sais pas lequel.

Commenté el 26 de Juillet, 2019 par Jackson

Answer 1

5 Réponses

Answer 2

4530voto

Steve Points 16704

En supposant que vous avez un bouton avec l'id button Essayez cet exemple :

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

J'ai obtenu le code de l'article Faites défiler en douceur un élément sans plugin jQuery . Et je l'ai testé sur l'exemple ci-dessous.

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>

Répondu el 13 de Juillet, 2011 par Steve (16704 Points )

34 votes

Cela ne fonctionnera pas dans tous les cas. Voir stackoverflow.com/questions/2905867/

Commenté el 25 de Avril, 2012 par Janis

82 votes

Si vous ne voulez pas d'animation, et que vous voulez plutôt passer instantanément à l'élément, utilisez .scrollTop(…) au lieu de .animate({scrollTop: …}, …) .

Commenté el 20 de Septembre, 2013 par Rory O'Kane

1 votes

Si vous essayez de lire cet article, voici un lien qui fonctionne : Faites défiler en douceur un élément sans plugin jQuery

Commenté el 18 de Juillet, 2021 par Adarsh Punj

Answer 3

568voto

Timothy Perez Points 6379

jQuery .scrollTo() : Voir - Démo, API, Source

J'ai écrit ce plugin léger pour rendre le défilement des pages/éléments beaucoup plus facile. Il est flexible, vous pouvez passer dans un élément cible ou une valeur spécifiée. Peut-être que cela pourrait faire partie de la prochaine version officielle de jQuery, qu'en pensez-vous ?

Exemples d'utilisation :

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

Options :

scrollTarget : Un élément, une chaîne ou un nombre qui indique la position de défilement souhaitée.

offsetTop : Un nombre qui définit un espacement supplémentaire au-dessus de la cible de défilement.

durée : Une chaîne ou un nombre déterminant la durée de l'animation.

facilitant : Une chaîne indiquant la fonction d'assouplissement à utiliser pour la transition.

complet : Une fonction à appeler une fois l'animation terminée.

Répondu el 5 de Octobre, 2012 par Timothy Perez (6379 Points )

16 votes

$('body') ne fonctionnant pas dans FF, j'ai essayé $('html, body') qui a fonctionné.

Commenté el 5 de Juillet, 2013 par kiranvj

9 votes

Si quelqu'un a besoin de ce script source, alors ici vous pouvez l'obtenir flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js

Commenté el 7 de Novembre, 2013 par Arthur

Answer 4

487voto

Atharva Points 624

Si l'effet de défilement fluide ne vous intéresse pas vraiment et que vous souhaitez simplement faire défiler un élément particulier, vous n'avez pas besoin d'une fonction jQuery pour cela. Javascript s'occupe de votre cas :

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Donc tout ce que vous avez à faire est : $("selector").get(0).scrollIntoView();

.get(0) est utilisé parce que nous voulons récupérer l'élément DOM de JavaScript et non l'élément DOM de JQuery.

Répondu el 24 de Décembre, 2013 par Atharva (624 Points )

17 votes

Pourriez-vous également utiliser $(selector)[0] ?

Commenté el 17 de Mars, 2014 par RobW

19 votes

RobW, oui, vous pouvez simplement utiliser [0], mais get(0) vous protège contre les index indéfinis ou négatifs. Voir la source : james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get

Commenté el 2 de Avril, 2014 par corbacho

25 votes

Si vous ne voulez pas du tout utiliser jQuery, utilisez simplement document.getElementById('#elementID').scrollIntoView() . Il n'est pas utile de charger une bibliothèque de ~100k juste pour sélectionner un élément et ensuite le convertir en JavaScript normal.

Commenté el 23 de Juin, 2014 par Gavin

Afficher 1 autres commentaires

Answer 5

59voto

Warface Points 1577

En utilisant ce simple script.

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

Si un hash tag est trouvé dans l'url, le scrollTo s'anime sur l'ID. Si aucune balise de hachage n'est trouvée, alors on ignore le script.

Répondu el 5 de Septembre, 2013 par Warface (1577 Points )

Answer 6

44voto

add9 Points 876

Consultez le ScrollTo plugin. Vous pouvez voir la démo aquí .

J'espère que cela vous aidera.

Répondu el 13 de Juillet, 2011 par add9 (876 Points )

Faire défiler un élément avec jQuery

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Faire défiler un élément avec jQuery

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: