Faites défiler jusqu'au centre de la fenêtre

Je voudrais un centre de div en cliquant dessus. Donc, si je suis en cliquant sur un div je le veux pour faire défiler vers le centre de la fenêtre d'affichage du navigateur. Je ne veux pas utiliser les points d'ancrage comme les guides et les exemples que j'ai vu. Comment puis-je y parvenir?

source d'informationauteur Designon

  1. 22

    D'une certaine façon vous avez à identifier les éléments cliquables. - Je construire un exemple, qui utilise le class-attribut.

    Étape 1

    C'est le script qui fait le travail:

    $('html,body').animate({
    scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2
}, 200);

    Ce que vous avez essayé est de faire défiler le récipient vers le haut de la page. Vous avez également de calculer et de soustraire la différence entre la hauteur du conteneur et de la fenêtre d'affichage de la hauteur. Divisez ce résultat par deux (comme vous voulez avoir le même espace en haut et en bas et vous êtes prêt à aller.

    Étape 2

    Puis vous ajoutez le gestionnaire de clic à tous les éléments:

    $(document).ready(function () {
    $('.image').click( function() {
        $('html,body').animate({ scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2  }, 200);
    });
});

    Étape 3

    De mettre en place certains HTML/CSS:

    <style>

    div.image {

        border:     1px solid red;
        height:     500px;
        width:      500px;
    }

</style>

<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
<div class="image">5</div>

    Et vous avez terminé.

    Découvrez la démo

    Essayer vous-même http://jsfiddle.net/insertusernamehere/3T9Py/

  2. 3

    J'en ai une légère modification à l'offre; si le "facteur d'ajustement" (c'est à dire ( $(window).height() - $(this).outerHeight(true) ) /2) < 0, vous pouvez obtenir des résultats indésirables lequel vous allez au-delà de cet élément dans la fenêtre avec défilement. J'ai ajouté un max(0,facteur d'ajustement) pour corriger :

    function scrollIntoView(el) {

    var offsetTop = $j(el).offset().top;
    var adjustment = Math.max(0,( $j(window).height() - $j(el).outerHeight(true) ) / 2);
    var scrollTop = offsetTop - adjustment;

    $j('html,body').animate({
        scrollTop: scrollTop
    }, 200);
}
  3. 1
    HTMLElement.prototype.scrollToCenter = function(){
    window.scrollBy(0, this.getBoundingClientRect().top - (window.innerHeight>>1));
}

    Réalisé avec JavaScript pour le Défilement vers le Centre dans le sens vertical. Et c'est pareil dans le sens horizontal.
    Je ne prends pas des éléments de la hauteur en considération, parce qu'ils ont peut-être plus grande que la hauteur de l'écran.