web-dev-qa-db-fra.com

Commencer une page à un certain point de défilement

Existe-t-il un moyen (avec CSS3, JS ou autre) de faire défiler une page à un moment donné?

J'aimerais que ma page soit chargée sans que l'en-tête ne s'affiche initialement au chargement (c'est-à-dire qu'il se situe au-dessus de la fenêtre d'affichage de l'utilisateur).

Y a-t-il un moyen simple et facile de s'y prendre?

javascripthtmlcsscss3web
21
arooo

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

Cela devrait fonctionner plutôt bien étant donné que vous ferez cela à onload, 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 qui vous convient. Naturellement, vous aurez besoin de le changer chaque fois que l'en-tête se déplace.

Exemple:

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

Solution CSS

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

Cela vous mènera au point où la div est présente.

Solution Javascript

Vous pouvez utiliser window.scroll(x,y) lors du chargement de la page.

14
Aniket

Ce sont des astuces très simples pour cela:

  1. Créer une classe offset css et l'assigner au corps

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

    Donc, ce corps sera chargé avec 500px offset du haut

  2. Ajoutez ensuite le code suivant au corps

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

  3. puis en utilisant jquery, supprime la classe offset quand la page est chargée

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

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 sa taille/son contenu, 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émo de travail ici

7
bryanbraun

HTML - Ancres nommées

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

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

Ceci devrait être défini au point qui doit être vu. Comme cela peut être vu même au bas de l'écran, vous devrez peut-être jeter l'ancre un peu plus bas que nécessaire. De cette façon, nous nous assurerons que le contenu en haut qui ne doit pas être affiché est bien masqué . Une fois défini pour le défilement lorsque la page est chargée, l’URL doit ê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>
6
Anuradha Kulkarni

Utilisez Javascript window.scroll:

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

  }
});​
2
SVS

Utilisation de 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 votre 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>
1
astro boy

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 fait défiler le site.

0
Jigar Jain

Ce travail pour moi.

<div class="demo">
        <h2>Demo</h2>
</div>


<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(document).ready(function () {
            $('html, body').animate({
                scrollTop: $('.demo').offset().top
            }, 'slow');
        });
    </script>

Merci.

0
Y. Joy Ch. Singha