Question jQuery fait défiler jusqu'à l'élément


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 dessus input avec #subject, la page devrait faire défiler jusqu'au dernier élément de la page avec une belle animation. Cela devrait être 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 devrait pas être trop rapide et devrait être fluide.

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


1871
2017-07-13 09:49


origine


Réponses:


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 reçu le code de l'article Faites défiler facilement vers 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>


3478
2017-07-13 09:52



  jQuery .scrollTo() Method 

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

J'ai écrit ce plugin léger pour faciliter le défilement des pages / éléments. C'est flexible où vous pouvez transmettre un élément cible ou une valeur spécifiée. Peut-être que cela pourrait faire partie de la prochaine sortie 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 d'exécution de l'animation.

soulager: Une chaîne indiquant quelle fonction d'accélération utiliser pour la transition.

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


453
2017-10-05 08:50



Si vous n'êtes pas très intéressé par l'effet de défilement lisse et que vous êtes intéressé par le défilement vers un élément particulier, vous n'avez pas besoin d'une fonction jQuery pour cela. Javascript a votre cas couvert:

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

Donc tout ce que vous devez 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.


267
2017-12-24 11:35



Vérifiez ScrollTo brancher. Vous pouvez voir la démo ici.

J'espère que ça aide.


42
2017-07-13 11:05



jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>


26
2017-07-18 18:06



En utilisant ce script simple

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

Faire en sorte que si une balise hash est trouvée dans l'url, le scrollTo s'anime à l'ID. Si ce n'est pas la balise de hachage trouvée, ignorez le script.


26
2017-09-05 11:53



La solution de Steve et Peter fonctionne très bien.

Mais dans certains cas, vous devrez peut-être convertir la valeur en nombre entier. Curieusement, la valeur retournée de $("...").offset().top est parfois dans float.
Utilisation: parseInt($("....").offset().top)

Par exemple:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

15
2018-02-06 15:39