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

j'ai une configuration de page simple telle que:

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

lorsque la page se charge, j'ai besoin de la page pour faire défiler automatiquement vers le bas (aucune animation nécessaire) à #header , de sorte que l'utilisateur ne peut pas voir la div About Us à moins qu'ils font défiler vers le haut.

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

je suis tombé sur ce autres question et essayé de modifier certaines des réponses à ma situation, mais rien ne semblait fonctionner.

Toute aide serait appréciée.

60
demandé sur Community 2012-01-16 21:59:13

3 réponses

Description

vous pouvez le faire en utilisant la méthode .scrollTop() et .offset() de jQuery."

Regardez mon échantillon et ce jsfiddle Demonstration

échantillon

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

Plus D'Information

111
répondu dknaack 2015-03-18 11:02:30

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

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

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();
23
répondu Naveed 2015-12-08 18:59:24

mettez ceci juste avant l'étiquette de fermeture du corps au bas de la page.

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

jQuery est en fait pas nécessaire.

13
répondu Chris Pietschmann 2014-04-29 17:48:36