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?
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)">
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.
Vous pouvez utiliser window.scroll(x,y)
lors du chargement de la page.
Ce sont des astuces très simples pour cela:
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
Ajoutez ensuite le code suivant au corps
<body class="offset" onLoad="window.scroll(0, 150)">
puis en utilisant jquery, supprime la classe offset quand la page est chargée
$(document).ready(function(){
$(".row").removeClass("offset");
});
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();
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>
Utilisez Javascript window.scroll
:
$(window).scroll(function(){
if ($(this).scrollTop() > 100){
$('something').hide();
}
else{
$j('something').show();
}
});
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>
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.
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.