Comment puis-je faire défiler la page à un endroit précis en utilisant jquery?

jQuery Scroll Plugin

puisqu'il s'agit d'une question marquée avec jquery je dois dire, que cette bibliothèque a un très joli plugin pour lisser le défilement, 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 défiler

vous pouvez utiliser un très approche légère en définissant votre fonction jQuery 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'aux coordonnées de page

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

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

simple javascript

scrolling avec window.scroll

window.scroll(horizontalOffset, verticalOffset);

pour résumer, utilisez la fenêtre.emplacement.de hachage pour passer à l'élément avec l'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>

oui, même en JavaScript, c'est assez facile. Vous donnez un id à un élément et vous pouvez l'utiliser comme "marque-page":

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

si vous voulez qu'il fasse défiler là quand un utilisateur clique sur un lien, vous pouvez juste utiliser la méthode éprouvée:

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

pour le faire programmatically, utiliser scrollIntoView()

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

il n'y a pas besoin d'utiliser n'importe quel plugin, vous pouvez le faire comme ceci:

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

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

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

Voici une version javascript pure:

location.hash = '#123';

ça défile 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 à localiser à un ID div particulier I. e, "idVal" dans ce cas. Si vous avez ultérieure vrd/tables qui s'ouvrent dans cette page via ajax, vous pouvez assigner une divs et appeler le script pour faire défiler jusqu'à l'emplacement particulier pour chaque contenu de divs.

espérons que ce 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>

Essayez cette

<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 pas assumer le conteneur est le document et seulement défile si l'objet est hors de vue. L'Animation mise en file d'attente est également désactivée pour éviter les rebondissements 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
            });
        }
    });
};

utilisant jquery.soulager.min.js, Avec fixe IE Erreurs de la console

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