web-dev-qa-db-fra.com

jQuery se déplace à l'ancre au chargement de la page

J'ai une simple mise en page telle que:

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

Lorsque la page est chargée, j'ai besoin que la page défile automatiquement (aucune animation requise) jusqu'à #header, de sorte que l'utilisateur ne peut pas voir la division À propos de nous à moins qu'il ne défile vers le haut.

#aboutUs a une hauteur fixe, aucune variable n'est donc nécessaire pour déterminer la hauteur ou quoi que ce soit ... si cela est même nécessaire.

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

Toute aide serait appréciée.

jqueryscrollanchor
69
scferg5

La description

Vous pouvez faire cela en utilisant la méthode .scrollTop() et .offset() de jQuery

Regardez mon échantillon et ceci démonstration de jsFiddle

Échantillon

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

Plus d'information

119
dknaack

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

Ensuite, vous pouvez appeler cette méthode comme suit:

$("#header").scrollToMe();
26
Naveed

Placez ceci juste avant la balise body de fermeture en bas de la page.

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

jQuery n'est en fait pas nécessaire.

16
Chris Pietschmann