Comment puis-je obtenir un élément pour faire défiler l'affichage, à l'aide de JQuery?

Question

Comment puis-je obtenir un élément pour faire défiler l'affichage, à l'aide de JQuery?

Demandé el 3 de Février, 2011: Quand la question a-t-elle été
42009 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai un document html avec des images dans un format de grille à l'aide de <ul><li><img.... La fenêtre du navigateur est à la fois verticale et horizontale de défilement.

Question: Quand je clique sur une image <img> comment puis-je obtenir le document en entier pour défiler jusqu'à une position où l'image j'ai juste cliqué sur est - top:20px; left:20px ?

J'ai eu une navigation sur ici pour des postes similaires...même si je suis assez nouveau pour JavaScript/JQuery et souhaitez comprendre comment cela est réalisé pour moi-même.

Toute aide serait Grandement Appréciée, Merci

Demandé el 3 de Février, 2011 par Nasir

Answer 1

5 Réponses

Answer 2

401voto

Andy E Points 132925

Il y a une méthode DOM appelés scrollIntoView, ce qui est pris en charge par tous les navigateurs principaux, qui permettra d'aligner un élément avec le haut/gauche de la fenêtre d'affichage (ou aussi près que possible).

$("#myImage")[0].scrollIntoView();

Sinon, si tous les éléments ont des Identifiants uniques, vous pouvez simplement changer l' hash de la propriété de l' location objet de l'arrière vers l'avant/prise en charge du bouton:

$(document).delegate("img", function (e) {
    if (e.target.id)
        window.location.hash = e.target.id;
});

Après cela, il suffit de régler l' scrollTop/scrollLeft propriétés par -20:

document.body.scrollLeft -= 20;
document.body.scrollTop -= 20;

Répondu el 3 de Février, 2011 par Andy E (132925 Points )

Answer 3

203voto

Box9 Points 41987

Puisque vous voulez savoir comment cela fonctionne, je vais vous expliquer étape par étape.

D'abord, vous voulez lier une fonction que l'image du gestionnaire de clic:

$('#someImage').click(function () {
    // Code to do scrolling happens here
});

Qui appliquera le gestionnaire de clic sur une image avec id="someImage". Si vous voulez faire cela pour toutes les images, remplacez - '#someImage' avec 'img'.

Maintenant pour le défilement de code:

L'image des décalages (par rapport au document):

var offset = $(this).offset(); // Contains .top and .left

Soustraire 20 top et left:
```
offset.left -= 20;
offset.top -= 20;
```
Maintenant animer le défilement haut et vers la gauche propriétés CSS de l' <body> et <html>:
```
$('html, body').animate({
    scrollTop: offset.top,
    scrollLeft: offset.left
});
```

Répondu el 3 de Février, 2011 par Box9 (41987 Points )

Answer 4

8voto

Felix Kling Points 247451

Il existe des méthodes pour faire défiler l'élément directement dans la vue, mais si vous voulez faire défiler jusqu'à un point par rapport à partir d'un élément, vous devez le faire manuellement:

À l'intérieur du gestionnaire de clic, obtenir la position de l'élément par rapport au document, soustraire 20 et l'utilisation window.scrollTo:

var pos = $(this).offset();
var top = pos.top - 20;
var left = pos.left - 20;
window.scrollTo((left < 0 ? 0 : left), (top < 0 ? 0 : top));

Répondu el 3 de Février, 2011 par Felix Kling (247451 Points )

Answer 5

7voto

Rob Stevenson-Leggett Points 13266

Avoir un regard sur le jQuery.scrollTo plugin.

Voici une démo.

Répondu el 3 de Février, 2011 par Rob Stevenson-Leggett (13266 Points )

Answer 6

3voto

morgunder Points 170

Mon INTERFACE a un défilement vertical liste de pouce à l'intérieur d'un thumbbar L'objectif était de faire de l'actuel pouce droit dans le centre de la thumbbar. J'ai commencé par le approuvés réponse, mais a constaté qu'il y avait un peu de bricolage pour vraiment le centre de l'actuelle pouce. espérons que cela aide quelqu'un d'autre.

balisage:

<ul id='thumbbar'>
    <li id='thumbbar-123'></li>
    <li id='thumbbar-124'></li>
    <li id='thumbbar-125'></li>
</ul>

jquery:

// scroll the current thumb bar thumb into view
heightbar   = $('#thumbbar').height();
heightthumb = $('#thumbbar-' + pageid).height();
offsetbar   = $('#thumbbar').scrollTop();


$('#thumbbar').animate({
    scrollTop: offsetthumb.top - heightbar / 2 - offsetbar - 20
});

Répondu el 1 de Août, 2013 par morgunder (170 Points )

Comment puis-je obtenir un élément pour faire défiler l'affichage, à l'aide de JQuery?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment puis-je obtenir un élément pour faire défiler l'affichage, à l'aide de JQuery?

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: