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

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

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

here 

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

    jQuery Scroll Plugin

    comme il s’agit d’une question taguée avec jquery, je dois dire que cette bibliothèque a 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 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 l’utiliser comme:

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

    Faites défiler jusqu’à une page coordonnées

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

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

    Javascript

    défilement avec window.scroll

     window.scroll(horizontalOffset, verticalOffset); 

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

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

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

     Jump to ID 
    will jump here

    Ouais, même en JavaScript, c’est assez facile. Vous donnez un identifiant à un élément et vous pouvez l’utiliser comme “signet”:

     
    here

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

     scroll to over there 

    Pour le faire par programmation, utilisez scrollIntoView()

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

    Il n’y a pas besoin d’utiliser un plugin, vous pouvez le faire comme ceci:

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

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

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

    Voici une version javascript pure:

     location.hash = '#123'; 

    Il défilera automatiquement. N’oubliez pas d’append le préfixe “#”.

    Javascript simple:

     window.location = "#elementId" 
     
    ...

    Cet exemple montre comment localiser un div id particulier, c’est-à-dire “idVal” dans ce cas. Si vous avez des div / tables ultérieures qui s’ouvriront dans cette page via ajax, vous pouvez alors atsortingbuer des div uniques et appeler le script pour accéder à l’emplacement spécifique de chaque contenu des divs.

    J’espère que ce sera utile.

      

    Essaye ça

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

    Voici la 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 queue 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 }); } }); }; 

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

    Html

     Features 
    Features Section

    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.subssortingng(href.indexOf('#'))).length > 0) { $('html, body').stop().animate({ scrollTop: $(href.subssortingng(href.indexOf('#'))).offset().top }, 1500, 'easeInOutExpo'); } else { window.location = href; } } event.preventDefault(); }); });