Comment puis-je faire défiler jusqu'à un emplacement spécifique sur la page à l'aide de jquery?

133

Est-il possible de faire défiler jusqu'à un emplacement spécifique sur la page en utilisant jQuery?

L'emplacement que je veux faire défiler doit-il avoir:

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

Ou peut-il simplement passer à un identifiant DOM spécifique?

mrblah
la source
3
juste une petite note: l'attribut «nom» n'est pas autorisé dans XHTML 1.1 Strict, utilisez plutôt un ID
Juraj Blahunka
question intéressante, vous ne pouvez pas utiliser les coordonnées de la page pour faire défiler? Je pense que nous devrions pouvoir le faire.
Omar Abid
J'ai obtenu une solution similaire à votre exigence à [ici] [1] [1]: stackoverflow.com/questions/3432656/…
user1493023
@mrblah votre problème est-il résolu?
Meghdad Hadidi

Réponses:

242

Plugin de défilement jQuery

puisqu'il s'agit d'une question taguée avec jquery, je dois dire que cette bibliothèque a un très bon plugin 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 une approche très 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 utilisez-le comme:

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

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

Animer htmlet bodyéléments avec scrollTopou scrollLeftattributs

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

JavaScript simple

défilement avec window.scroll

window.scroll(horizontalOffset, verticalOffset);

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

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

Directement en HTML (améliorations d'accessibilité)

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

<div id="your-page-element">
    will jump here
</div>
Juraj Blahunka
la source
Merci @Juraj Blahunka, mais je le fais sans aucun plugin
Meghdad Hadidi
Le lien ne m'amène pas à ScrollTo . Pouvez-vous le mettre à jour s'il vous plaît?
Barna Tekse
Cela devrait être la réponse!
neelmeg
128

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

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

Si vous voulez qu'il défile là quand 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 par programme, utilisez scrollIntoView()

document.getElementById("here").scrollIntoView()
nickf
la source
@nickf Ceci n'est pas encore pris en charge partout. caniuse.com/#search=scrollIntoView
Aditya Singh
Ce je def pris en charge ( developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView ). Je pense que vous n'avez pas lu le caniuse correctement. Cependant, ne sera pas animé. Plutôt un saut assez brusque qui n'est pas toujours génial.
perry
53

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

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

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

$('html, body').animate({scrollTop: divPosition.top}, "slow");
Meghdad Hadidi
la source
3
+1 C'est probablement la meilleure réponse. Pas beaucoup de code et ne nécessite pas de plugin.
Tricky12
1
Notez que vous devrez peut-être recalculer le décalage lors du redimensionnement de la fenêtre.
Bart Burg
2
@BartBurg bon point - ou tout simplement recalculer juste avant que l' .animateappel ne se produise
mikermcneil
5
Aimez la réponse simple. Pourquoi les gens doivent-ils compliquer les choses? Je ne veux pas d'un autre plugin.
sterfry68
1
En effet, la meilleure réponse.
Robert Ross
21

Voici une version purement javascript:

location.hash = '#123';

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

okw
la source
1
En utilisant la manière primitive de l'ancre nommée, vous pouvez avoir une URL qui inclut le hachage. Par exemple, mywebsite.com/page-about/#123 Bookmarking inclut également le comportement hash + scrollintoview.
okw
1
Ce serait génial si vous pouviez expliquer un peu
JGallardo
6

Javascript simple:

window.location = "#elementId"
Luiz Picanço
la source
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 comment localiser vers un identifiant de div particulier, c'est-à-dire «idVal» dans ce cas. Si vous avez des divs / tables ultérieurs qui s'ouvriront dans cette page via ajax, alors vous pouvez attribuer des div uniques et appeler le script pour faire défiler jusqu'à l'emplacement particulier pour chaque contenu de divs.

J'espère que cela sera utile.

user2793243
la source
4
<script type="text/javascript">
    $(document).ready(function(){
        $(".scroll-element").click(function(){
            $('html,body').animate({
                scrollTop: $('.our_companies').offset().top
            }, 1000);

            return false;
        });
    })
</script>

Yogesh Rathod
la source
Ce serait formidable si vous ajoutez des commentaires à votre code. Comment cela aide-t-il le demandeur à résoudre sa question?
Artemix
1

Essaye ça

<div id="divRegister"></div>

$(document).ready(function() {
location.hash = "divRegister";
});
Ajay-Systematix
la source
0

Voici une variante de l' approche légère de @ juraj-blahunka . Cette fonction ne suppose pas que le conteneur est le document et ne défile que si l'élément est hors de vue. La mise en file d'attente des animations est également désactivée pour éviter les rebonds inutiles.

$.fn.scrollToView = function () {
    return $.each(this, function () {
        if ($(this).position().top < 0 ||
            $(this).position().top + $(this).height() > $(this).parent().height()) {
            $(this).parent().animate({
                scrollTop: $(this).parent().scrollTop() + $(this).position().top
            }, {
                duration: 300,
                queue: false
            });
        }
    });
};
Richie
la source
J'ai eu le problème de rebond, mais votre méthode ne fonctionne pas
Anon
0

Utilisation de jquery.easing.min.js, avec des erreurs de console IE corrigées

HTML

<a class="page-scroll" href="#features">Features</a>
<section id="features" class="features-section">Features Section</section>


        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Scrolling Nav JavaScript -->
        <script src="js/jquery.easing.min.js"></script>

Jquery

//jQuery to collapse the navbar on scroll, you can use this code with in external file with name scrolling-nav.js
        $(window).scroll(function () {
            if ($(".navbar").offset().top > 50) {
                $(".navbar-fixed-top").addClass("top-nav-collapse");
            } else {
                $(".navbar-fixed-top").removeClass("top-nav-collapse");
            }
        });
        //jQuery for page scrolling feature - requires jQuery Easing plugin
        $(function () {
            $('a.page-scroll').bind('click', function (event) {
                var anchor = $(this);
                if ($(anchor).length > 0) {
                    var href = $(anchor).attr('href');
                    if ($(href.substring(href.indexOf('#'))).length > 0) {
                        $('html, body').stop().animate({
                            scrollTop: $(href.substring(href.indexOf('#'))).offset().top
                        }, 1500, 'easeInOutExpo');
                    }
                    else {
                        window.location = href;
                    }
                }
                event.preventDefault();
            });
        });
Super modèle
la source
C'est beaucoup trop de code pour une tâche aussi simple. location.hash = 'idOfElement';devrait suffire
Kolob Canyon
0

Vous pouvez utiliser scroll-behavior: smooth;pour faire cela sans Javascript

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

Sairam
la source
comportement de défilement: lisse; n'est pas une propriété compatible avec le navigateur.
Super Model
vérifiez la compatibilité du navigateur plus bas dans le lien - developer.mozilla.org/en-US/docs/Web/CSS/...
Sairam
Oui, le tableau indiqué dans vos liens s'affiche: Edge, IE et safari ne sont pas compatibles avec cette propriété.
Super Model