Comment accéder à un élément spécifique de la page ?

Question

Sur ma page HTML, je veux pouvoir "aller" / "faire défiler" / "mettre l'accent" sur un élément de la page.

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

Existe-t-il un autre moyen, via JavaScript, de faire en sorte que la page se dirige vers 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>

Answer 1

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

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

Où true signifie aligner en haut de la page, et false est aligné sur le bas.

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

Ou peut-être juste le top position() (docs) de l'élément, et définir l'élément scrollTop() (docs) à cette position :

var top = $('#div_' + element_id).position().top;
$(window).scrollTop( top );

Answer 2

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

Alors vous pourriez simplement dire $('#div_element2').goTo(); pour faire défiler jusqu'à <div id="div_element2"> . La gestion des options et la configurabilité sont laissées comme un exercice pour le lecteur.

Answer 3

document.getElementById("elementID").scrollIntoView();

Même chose, mais en l'enveloppant dans une fonction :

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

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

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

Answer 4

Voici un simple javascript pour cela

appelez cette fonction lorsque vous devez faire défiler l'écran jusqu'à un élément ayant un id="yourSpecificElementId".

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

et vous avez besoin de cette fonction pour travailler :

//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 défilera jusqu'à votre élément spécifique.

Answer 5

Pour passer à un un élément spécifique de votre page vous pouvez ajouter une fonction dans votre jQuery(document).ready(function($){...}) comme suit :

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

Il fonctionne comme un charme dans tous les navigateurs. Réglez la vitesse en fonction de vos besoins.