Comment faire défiler la page jusqu'à un endroit précis à l'aide de jquery ?

Question

Est-il possible de faire défiler la page jusqu'à un endroit précis à l'aide de jQuery ?

Est-ce que l'emplacement vers lequel je veux défiler doit avoir :

<a name="#123">here</a>

Ou peut-il simplement se déplacer vers un DOM id spécifique ?

Answer 1

Plugin jQuery Scroll

puisque c'est une question étiquetée avec jquery Je dois dire que cette bibliothèque dispose d'un plugin très agréable pour un défilement fluide, vous pouvez le trouver ici : http://plugins.jquery.com/scrollTo/

Extraits de la documentation :

$('div.pane').scrollTo(...);//all divs w/class pane

ou

$.scrollTo(...);//the plugin will take care of this

Fonction jQuery personnalisée pour le défilement

vous pouvez utiliser un approche légère en définissant votre fonction jquery de défilement personnalisée

$.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
}

et l'utiliser comme :

$('#your-div').scrollView();

Faire défiler les coordonnées d'une page

Animer html et body éléments avec scrollTop ou scrollLeft attributs

$('html, body').animate({
    scrollTop: 0,
    scrollLeft: 300
}, 1000);

Simple javascript

défilement avec window.scroll

window.scroll(horizontalOffset, verticalOffset);

pour résumer, utilisez le hash de window.location.hash pour sauter à l'élément avec ID

window.location.hash = '#your-page-element';

Directement en HTML (amélioration de l'accessibilité)

<a href="#your-page-element">Jump to ID</a>

<div id="your-page-element">
    will jump here
</div>

Answer 2

Oui, même en JavaScript simple, c'est assez facile. Vous donnez un identifiant à un élément et vous pouvez l'utiliser comme "signet" :

<div id="here">here</div>

Si vous voulez qu'il défile lorsqu'un utilisateur clique sur un lien, vous pouvez simplement utiliser la méthode éprouvée :

<a href="#here">scroll to over there</a>

Pour le faire de manière programmatique, utilisez scrollIntoView()

document.getElementById("here").scrollIntoView()

Answer 3

Il n'est pas nécessaire d'utiliser un plugin, vous pouvez le faire comme ceci :

var divPosition = $('#divId').offset();

puis utilisez-le pour faire défiler le document vers un DOM spécifique :

$('html, body').animate({scrollTop: divPosition.top}, "slow");

Answer 4

Voici une version purement javascript :

location.hash = '#123';

Il défilera automatiquement. N'oubliez pas d'ajouter le préfixe "#".

Answer 5

<div id="idVal">
    <!--div content goes here-->
</div>
...
<script type="text/javascript">
     $(document).ready(function(){
         var divLoc = $('#idVal').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
</script>

Cet exemple montre de localiser à un id div particulier c'est-à-dire, 'idVal' dans ce cas. Si vous avez des divs/tables successifs qui s'ouvriront dans cette page via ajax, alors vous pouvez attribuer des divs uniques et appeler le script pour faire défiler jusqu'à l'emplacement particulier pour chaque contenu de divs.

J'espère que cela vous sera utile.