web-dev-qa-db-fra.com

Comment aller à un élément spécifique sur la page?

Sur ma page HTML, je souhaite pouvoir "accéder à"/"faire défiler jusqu'à"/"mettre l'accent sur" un élément de la page.

Normalement, j'utiliserais une balise d'ancrage avec un href="#something", mais j'utilise déjà l'événement hashchange avec le plugin BBQ pour charger cette page.

Donc, y a-t-il un autre moyen, via JavaScript, de faire passer la page à un élément donné de la page?

Voici les grandes lignes de ce que j'essaie de faire:

function focusOnElement(element_id) {
     $('#div_' + element_id).goTo(); // need to 'go to' this element
}

<div id="div_element1">
   yadda yadda 
</div>
<div id="div_element2">
   blah blah
</div>

<span onclick="focusOnElement('element1');">Click here to go to element 1</span>
<span onclick="focusOnElement('element2');">Click here to go to element 2</span>
javascriptjqueryhtml
159
Cuga

La technique standard sous forme de plugin ressemblerait à ceci:

(function($) {
    $.fn.goTo = function() {
        $('html, body').animate({
            scrollTop: $(this).offset().top + 'px'
        }, 'fast');
        return this; // for chaining...
    }
})(jQuery);

Ensuite, vous pouvez simplement dire $('#div_element2').goTo(); pour faire défiler jusqu'à <div id="div_element2">. La gestion des options et la configurabilité restent un exercice pour le lecteur.

181
mu is too short

Si l'élément n'est actuellement pas visible sur la page, vous pouvez utiliser la méthode native scrollIntoView() .

$('#div_' + element_id)[0].scrollIntoView( true );

Où true signifie aligner en haut de la page et false en bas.

Sinon, il y a n plugin scrollTo() pour jQuery, que vous pouvez utiliser.

Ou peut-être simplement obtenir le topposition()(docs) de l'élément et définissez le scrollTop()(docs) à cette position:

var top = $('#div_' + element_id).position().top;
$(window).scrollTop( top );
214
user113716
document.getElementById("elementID").scrollIntoView();

Même chose, mais en l’emballant dans une fonction:

function scrollIntoView(eleID) {
   var e = document.getElementById(eleID);
   if (!!e && e.scrollIntoView) {
       e.scrollIntoView();
   }
}

Cela fonctionne même dans un IFrame sur un iPhone.

Exemple d'utilisation de getElementById: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementbyid

167
GlennG

voici un simple javascript pour cela

appelez-le lorsque vous devez faire défiler l'écran jusqu'à un élément dont id = "yourSpecificElementId"

window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));

et vous avez besoin de cette fonction pour le travail:

//Finds y value of given object
function findPos(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        do {
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    return [curtop];
    }
}

l'écran fera défiler jusqu'à votre élément spécifique.

33
AnhSirk Dasarp

Pour faire défiler jusqu'à un élément spécifique de votre page, vous pouvez ajouter une fonction à votre jQuery(document).ready(function($){...}) comme suit:

$("#fromTHIS").click(function () {
    $("html, body").animate({ scrollTop: $("#toTHIS").offset().top }, 500);
    return true;
});

Cela fonctionne comme un charme dans tous les navigateurs. Ajustez la vitesse en fonction de vos besoins.

22
lorddarq