Démarrage d'une page à un certain point de défilement

Existe-t-il un moyen (avec CSS3, JS, ou n'importe quoi entre les deux) pour obtenir une page pour démarrer à un certain point défilé?

Je voudrais que ma page se charge sans que l'en-tête ne s'affiche initialement sur la charge (c'est-à-dire au-dessus de la fenêtre actuelle de l'utilisateur).

Existe-t-il un moyen simple / facile d'y parvenir?

Vous pouvez utiliser le javascript standard: window.scroll(x, y) .

Cela devrait fonctionner très bien étant donné que vous allez faire cela en charge, c'est-à-dire que la fenêtre devrait commencer à (0, 0). Jouez avec (x, y) jusqu'à ce que vous obteniez votre en-tête à la position avec laquelle vous êtes satisfait. Naturellement, vous devrez le changer n'importe quand l'en-tête se déplace.

Exemple:

 <body onLoad="window.scroll(0, 150)"> 

Solution CSS

Si vous avez un id donné à un div qui contient votre contenu après l'en-tête, vous pouvez probablement charger la page avec une URL de ce genre, http://website.com/page#id .

Cela vous mènera au point où le div est présent.

Solution Javascript

Vous pouvez utiliser window.scroll(x,y) sur la charge de page.

Ce sont des astuces très simples pour cela:

  1. Créer une classe de décalage css et attribuer au corps

     .offset{ margin-top:-500px; } 

    Donc, ce corps sera chargé avec un décalage de 500px par le haut

  2. Ajoutez ensuite le code suivant au corps

     <body class="offset" onLoad="window.scroll(0, 150)"> 
  3. Puis en utilisant jquery, supprimez la classe de décalage lorsque la page est chargée

     $(document).ready(function(){ $(".row").removeClass("offset"); }); 

HTML – Ancrages nommés

Vous pouvez également utiliser de bonnes anciennes ancrages. Définir une ancre nommée en utilisant

  <a id="start">any text</a> 

Cela devrait être défini au point qui doit être considéré. Comme cela peut être en vue même au bas de l'écran, vous devrez peut-être attacher un peu plus bas que nécessaire. De cette façon, nous veillerons à ce que les contenus en haut qui ne doivent pas être affichés soient bien cachés. Une fois qu'il est défini pour défiler vers le bas lorsque la page est chargée, l'URL devrait être page.aspx # start au lieu de page.aspx

 <a href="#start">access within the same page</a> <a href="page.aspx#start">access from outside the page</a> 

Les réponses actuelles entraînent un "saut" notable sur la page, ou vous obligent à connaître le nombre de pixels exact que vous souhaitez sauter.

Je voulais une solution qui dépasse un conteneur, quelle que soit la taille / contenu du conteneur, et voici ce que j'ai proposé:

HTML

 <div class="skip-me">Skip this content</div> 

CSS

 // Hide the content initially with display: none. .skip-me { display: none; } .unhide { display: block; } 

JS

 // Unhide the content and jump to the right place on the page at the same time function restoreAndSkipContent() { var hidden = document.querySelector('.skip-me'); hidden.classList.add('unhide'); window.scroll(0, hidden.offsetHeight); }; restoreAndSkipContent(); 

Démonstration de travail ici

Utilisez Javascript window.scroll :

 $(window).scroll(function(){ if ($(this).scrollTop() > 100){ $('something').hide(); } else{ $j('something').show(); } });​ 

En utilisant javascript scrollBy . Pour que cette méthode fonctionne, la propriété visible de la barre de défilement de la fenêtre doit être définie sur true. Assurez-vous donc que la page est suffisamment longue pour que la barre de défilement verticale apparaisse.

 <html> <head> </head> <body onLoad="window.scrollBy(0,100)"> <div style="height:300px;"> Some text </div> <div style="height:900px;"> Some text 2 </div> </body> </html> 

Il existe une fonction dans jquery appelée .scroll () .. Vous pouvez utiliser cette fonction pour rendre votre en-tête visible uniquement lorsque l'utilisateur défile le site.