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

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?

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>

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()

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");

Voici une version purement javascript:

location.hash = '#123';

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

Javascript simple:

window.location = "#elementId"

<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.

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

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

Essaye ça

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

$(document).ready(function() {
location.hash = "divRegister";
});

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
            });
        }
    });
};

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

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

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