jQuery déplacer de point d'ancrage au chargement de la page

J'ai une simple mise en page tels que:

<div id="aboutUs">
  About us content...
</div>
<div id="header">
  Header content...
</div>

Lorsque le chargement de la page, j'ai besoin de la page pour faire défiler automatiquement vers le bas (pas d'animation nécessaire) pour #header, de sorte que l'utilisateur ne peut pas voir la div, à moins qu'ils défilement vers le haut.

#aboutUs a une hauteur fixe, donc il n'y a pas besoin de toutes les variables pour déterminer la hauteur ou quoi que ce soit... si c'est encore nécessaire.

Je suis tombé sur cette autre question et essayé de modifier certaines des réponses à ma situation, mais rien ne semblait fonctionner.

Toute aide serait appréciée.

InformationsquelleAutor scferg5 | 2012-01-16
  1. 124

    Description

    Vous pouvez le faire à l'aide de jQuery .scrollTop() et .offset() méthode

    Découvrez mon échantillon, et cette jsFiddle de Démonstration

    Échantillon

    $(function() {
    $(document).scrollTop( $("#header").offset().top );  
});

    Plus D'Informations

    • Merci pour votre réponse... c'est exactement ce dont j'ai besoin sauf que je peux pas le faire fonctionner sur ma fin. Si cela fait une différence, je travaille avec un pré-codé vitrine (donc je ne peux pas changer la structure) et la div est placé à l'avant de l'en-tête à l'aide de l' .insertBefore. Serait-ce l'amenant à ne pas travailler? Merci.
    • Désolé pour mon retard respone, j'étais dans la cuisine 😉 On dirait que vous êtes nouveau à jQuery, droit ? Vous devez attendre jusqu'à ce que le DOM est entièrement bâtie. Ma réponse et le violon est mis à jour. Espérons que cela aide, si pas de me le demander.
    • Heureux de vous aider! Have a nice day!
    • Peut-être que je manque quelque chose, mais pourquoi est-ce mieux que document.getElementById("header").scrollIntoView()?
    InformationsquelleAutor dknaack
  2. 26

    Avez-vous essayé de JQuery scrollTo méthode? http://demos.flesler.com/jquery/scrollTo/

    Ou vous pouvez étendre JQuery et ajouter votre personnalisé mentod:

    jQuery.fn.extend({
 scrollToMe: function () {
   var x = jQuery(this).offset().top - 100;
   jQuery('html,body').animate({scrollTop: x}, 400);
}});

    Alors vous pouvez appeler cette méthode comme:

    $("#header").scrollToMe();
    • Fonction de refroidissement:) Vous pouvez laisser la prise de fonction de la vitesse de l'animation en tant que variable aswell. Merci!!!!
    InformationsquelleAutor Naveed
  3. 16

    Mettre ce droit avant la balise Body de clôture au bas de la page.

    <script>
    if (location.hash) {
        location.href = location.hash;
    }
</script>

    jQuery est en fait pas nécessaire.

    • Étant donné que "pas d'animation nécessaires", je pense que c'est la solution la plus simple.
    • Wow, c'est juste totalement sauvé mon bacon sur une autre question. Merci beaucoup Chris 🙂
    InformationsquelleAutor Chris Pietschmann