web-dev-qa-db-fra.com

Comment puis-je faire défiler vers un emplacement spécifique sur la page en utilisant jQuery?

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

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

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

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

jqueryscrollscrolltojquery-scrollable
127
mrblah

jQuery Scroll Plugin

puisqu'il s'agit d'une question étiquetée avec jquery, je dois dire que cette bibliothèque possède un très bon plugin pour le défilement régulier, vous pouvez la 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 faire défiler

vous pouvez utiliser une approche très légère en définissant votre fonction de défilement personnalisé

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

et l'utiliser comme:

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

Faites défiler jusqu'à une page de coordonnées

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

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

Javascript simple

faire défiler avec window.scroll

window.scroll(horizontalOffset, verticalOffset);

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

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

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

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

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

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

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

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

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

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");
49
Meghdad Hadidi

Voici une version javascript pure:

location.hash = '#123';

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

20
o.k.w

Javascript simple:

window.location = "#elementId"
6
Luiz Picanço
<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 un ID particulier, à savoir "idVal" dans ce cas. Si vous avez d'autres div/tables qui s'ouvriront sur cette page via ajax, vous pouvez alors affecter des div uniques et appeler le script pour faire défiler jusqu'à l'emplacement particulier de chaque contenu de div.

J'espère que cela vous sera utile.

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

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

4
Yogesh Rathod

Essaye ça

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

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

Voici une variante de l'approche poids léger de @ juraj-blahunka. Cette fonction ne suppose pas que le conteneur est le document et ne défile que si l'élément est invisible. La mise en file d'attente d'animation 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
            });
        }
    });
};
0
Richie

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

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

0
Sairam

Utilisation de jquery.easing.min.js, avec des erreurs de console IE fixes

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();
            });
        });
0
Super Model