Existe-t-il un moyen de contrôler le défilement du navigateur avec JavaScript/jQuery?
Lorsque je fais défiler ma page à mi-chemin, puis que je déclenche un rechargement, je souhaite que la page soit complètement remplie, mais au lieu de cela, il essaie de trouver la dernière position de défilement. Alors j'ai fait ça:
$('document').ready(function() {
$(window).scrollTop(0);
});
Mais pas de chance.
MODIFIER:
Donc, vos deux réponses ont fonctionné lorsque je les ai appelées après le chargement de la page - Merci. Cependant, si je fais juste une actualisation de la page, le navigateur calcule et fait défiler l'écran jusqu'à son ancienne position de défilement APRÈS l'événement .ready
(j'ai également testé la fonction body onload ()).
La suite est donc la suivante: existe-t-il un moyen d'empêcher le navigateur de revenir à sa position passée, ou de revenir au début après avoir terminé?
Solution JavaScript pure inter-navigateurs:
document.body.scrollTop = document.documentElement.scrollTop = 0;
Vous presque avez compris - vous devez définir scrollTop
sur body
et non window
:
$(function() {
$('body').scrollTop(0);
});
MODIFIER:
Peut-être que vous pouvez ajouter une ancre vierge en haut de la page:
$(function() {
$('<a name="top"/>').insertBefore($('body').children().eq(0));
window.location.hash = 'top';
});
Existe-t-il un moyen d'empêcher le navigateur faire défiler jusqu'à sa position passée, ou à re-faites défiler vers le haut APRÈS avoir fait son chose?
La solution jQuery suivante fonctionne pour moi:
$(window).unload(function() {
$('body').scrollTop(0);
});
Voici une version pure de défilement animé par JavaScript pour les non-jQuery'ers: D
var stepTime = 20;
var docBody = document.body;
var focElem = document.documentElement;
var scrollAnimationStep = function (initPos, stepAmount) {
var newPos = initPos - stepAmount > 0 ? initPos - stepAmount : 0;
docBody.scrollTop = focElem.scrollTop = newPos;
newPos && setTimeout(function () {
scrollAnimationStep(newPos, stepAmount);
}, stepTime);
}
var scrollTopAnimated = function (speed) {
var topOffset = docBody.scrollTop || focElem.scrollTop;
var stepAmount = topOffset;
speed && (stepAmount = (topOffset * stepTime)/speed);
scrollAnimationStep(topOffset, stepAmount);
};
Et alors:
<button onclick="scrollTopAnimated(1000)">Scroll Top</button>
Cela fonctionne pour moi:
window.onload = function() {
// short timeout
setTimeout(function() {
$(document.body).scrollTop(0);
}, 15);
};
Utilise une setTimeout
courte dans la onload
pour donner au navigateur une chance de faire le défilement.
Vous pouvez utiliser avec jQuery
jQuery(window).load(function(){
jQuery("html,body").animate({scrollTop: 100}, 1000);
});
METTRE &AGRAVE; JOUR
Aller en haut de la page avec un effet de défilement est un peu plus facile en javascript avec:
_ { https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll } _
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
MISE EN GARDE
Nous l'utilisons dans nos projets plus récents, mais je viens de vérifier la doc mozilla tout en mettant à jour ma réponse et je pense qu'elle a été mise à jour. À l'heure actuelle, la méthode est window.scroll(x-coord, y-coord)
et ne mentionne ni ne montre d'exemples utilisant le paramètre object
, dans lequel vous pouvez définir behavior
sur smooth
. Je viens d'essayer le code et cela fonctionne toujours dans chrome et firefox et le paramètre object est toujours dans le spec .
Donc, utilisez ceci avec précaution ou vous pouvez utiliser ceci Polyfill . En plus de faire défiler vers le haut, ce polyfill gère également d'autres méthodes: window.scrollBy
, element.scrollIntoView
, etc.
ANCIENNE RÉPONSE
Ceci est notre implémentation Vanilla javascript
. Il a un effet d’atténuation simple afin que l’utilisateur ne soit pas choqué après un clic sur le bouton To Top.
C'est très petit et devient encore plus petit quand minified. Les développeurs cherchant une alternative à la méthode jQuery mais voulant obtenir les mêmes résultats peuvent essayer ceci.
JS
document.querySelector("#to-top").addEventListener("click", function(){
var toTopInterval = setInterval(function(){
var supportedScrollTop = document.body.scrollTop > 0 ? document.body : document.documentElement;
if (supportedScrollTop.scrollTop > 0) {
supportedScrollTop.scrollTop = supportedScrollTop.scrollTop - 50;
}
if (supportedScrollTop.scrollTop < 1) {
clearInterval(toTopInterval);
}
}, 10);
},false);
HTML
<button id="to-top">To Top</button>
À votre santé!
Utilisez la fonction suivante
window.scrollTo(xpos, ypos)
Ici, xpos est requis. La coordonnée à faire défiler, le long de l'axe des x (horizontal), en pixels
ypos est également requis. La coordonnée à faire défiler, le long de l’axe des y (vertical), en pixels
$(function() {
// the element inside of which we want to scroll
var $elem = $('#content');
// show the buttons
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
// whenever we scroll fade out both buttons
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
// ... and whenever we stop scrolling fade in both buttons
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
// clicking the "down" button will make the page scroll to the $elem's height
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}
);
// clicking the "up" button will make the page scroll to the top of the page
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
Utilisez ceci
Ma solution Javascript pure (animée):
function gototop() {
if (window.scrollY>0) {
window.scrollTo(0,window.scrollY-20)
setTimeout("gototop()",10)
}
}
Explication:
window.scrollY
est une variable gérée par le navigateur indiquant le nombre de pixels à partir du haut avec lequel la fenêtre a défilé.
window.scrollTo(x,y)
est une fonction qui fait défiler la fenêtre d’une quantité spécifique de pixels sur l’axe des x et sur l’axe des y.
Ainsi, window.scrollTo(0,window.scrollY-20)
déplace la page de 20 pixels vers le haut.
setTimeout
appelle la fonction à nouveau dans 10 millisecondes afin que nous puissions ensuite la déplacer de 20 pixels supplémentaires (animé), et l'instruction if
vérifie s'il faut encore faire défiler.
Le code suivant fonctionne dans Firefox, Chrome et Safari , mais je n'ai pas pu le tester dans Internet Explorer. Est-ce que quelqu'un peut le tester, puis éditer ma réponse ou commenter?
$(document).scrollTop(0);
Cross-browser scroll to top:
if($('body').scrollTop()>0){
$('body').scrollTop(0); //Chrome,Safari
}else{
if($('html').scrollTop()>0){ //IE, FF
$('html').scrollTop(0);
}
}
Faites défiler le navigateur pour atteindre un élément avec id = div_id:
if($('body').scrollTop()>$('#div_id').offset().top){
$('body').scrollTop($('#div_id').offset().top); //Chrome,Safari
}else{
if($('html').scrollTop()>$('#div_id').offset().top){ //IE, FF
$('html').scrollTop($('#div_id').offset().top);
}
}
Pourquoi n'utilisez-vous pas un élément de référence au tout début de votre fichier html, comme
<div id="top"></div>
et ensuite, quand la page se charge, il suffit de faire
$(document).ready(function(){
top.location.href = '#top';
});
Si le navigateur fait défiler après cette fonction est activée, vous ne faites que
$(window).load(function(){
top.location.href = '#top';
});
Cela fonctionne:
jQuery(document).ready(function() {
jQuery("html").animate({ scrollTop: 0 }, "fast");
});
La combinaison de ces deux m'a aidé. Aucune des autres réponses ne m'a aidé puisque j'avais un Sidenav qui ne défilait pas.
setTimeout(function () {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}, 15);
Si vous êtes en mode quirks (merci @Niet the Dark Absol):
document.body.scrollTop = document.documentElement.scrollTop = 0;
Si vous êtes en mode strict:
document.documentElement.scrollTop = 0;
Pas besoin de jQuery ici.
Dans mon cas, le corps n'a pas fonctionné:
$('body').scrollTop(0);
Mais le HTML a fonctionné:
$('html').scrollTop(0);
Pour répondre à votre question modifiée, vous pouvez enregistrer le gestionnaire onscroll
comme suit:
document.documentElement.onscroll = document.body.onscroll = function() {
this.scrollTop = 0;
this.onscroll = null;
}
Cela fera en sorte que la première tentative de défilement (qui est probablement celle automatique effectuée par le navigateur) soit effectivement annulée.
var totop = $('#totop');
totop.click(function(){
$('html, body').stop(true,true).animate({scrollTop:0}, 1000);
return false;
});
$(window).scroll(function(){
if ($(this).scrollTop() > 100){
totop.fadeIn();
}else{
totop.fadeOut();
}
});
<img id="totop" src="img/arrow_up.png" title="Click to go Up" style="display:none;position:fixed;bottom:10px;right:10px;cursor:pointer;cursor:hand;"/>
Si quelqu'un utilise un design angulaire et matériel avec sidenav. Cela vous enverra en haut de la page:
let ele = document.getElementsByClassName('md-sidenav-content');
let eleArray = <Element[]>Array.prototype.slice.call(ele);
eleArray.map( val => {
val.scrollTop = document.documentElement.scrollTop = 0;
});
sans animation, juste scroll(0, 0)
(Vanilla JS)
<script>
sessionStorage.scrollDirection = 1;//create a session variable
var pageScroll = function() {
window.scrollBy ({
top: sessionStorage.scrollDirection,
left: 0,
behavior: 'smooth'
});
if($(window).scrollTop() + $(window).height() > $(document).height() - 1)
{
sessionStorage.scrollDirection= Number(sessionStorage.scrollDirection )-300;
setTimeout(pageScroll,50);//
}
else{
sessionStorage.scrollDirection=Number(sessionStorage.scrollDirection )+1
setTimeout(pageScroll,300);
}
};
pageScroll();
</script>
Seeint le hash devrait faire le travail. Si vous avez un en-tête, vous pouvez utiliser
window.location.href = "#headerid";
sinon, seul le # fonctionnera
window.location.href = "#";
Et comme il est écrit dans l'URL, il restera si vous actualisez.
En fait, vous n'avez pas besoin de JavaScript pour cela si vous voulez le faire sur un événement onclick, vous devriez simplement mettre un lien autour de votre élément et lui donner # comme href.
Commencez par ajouter une balise d'ancrage vierge à l'endroit où vous souhaitez aller.
<a href="#topAnchor"></a>
Maintenant, ajoutez une fonction dans la section d'en-tête
function GoToTop() {
var urllocation = location.href;
if (urllocation.indexOf("#topAnchor") > -1) {
window.location.hash = "topAnchor";
} else {
return false;
}
}
enfin ajouter un événement onload à la balise body
<body onload="GoToTop()">
Une version générique qui fonctionne pour toutes les valeurs X et Y et est identique à window.scrollTo api, avec juste l'ajout de scrollDuration.
* Une version générique correspondant à l’API du navigateur window.scrollTo **
function smoothScrollTo(x, y, scrollDuration) {
x = Math.abs(x || 0);
y = Math.abs(y || 0);
scrollDuration = scrollDuration || 1500;
var currentScrollY = window.scrollY,
currentScrollX = window.scrollX,
dirY = y > currentScrollY ? 1 : -1,
dirX = x > currentScrollX ? 1 : -1,
tick = 16.6667, // 1000 / 60
scrollStep = Math.PI / ( scrollDuration / tick ),
cosParameterY = currentScrollY / 2,
cosParameterX = currentScrollX / 2,
scrollCount = 0,
scrollMargin;
function step() {
scrollCount = scrollCount + 1;
if ( window.scrollX !== x ) {
scrollMargin = cosParameterX + dirX * cosParameterX * Math.cos( scrollCount * scrollStep );
window.scrollTo( 0, ( currentScrollX - scrollMargin ) );
}
if ( window.scrollY !== y ) {
scrollMargin = cosParameterY + dirY * cosParameterY * Math.cos( scrollCount * scrollStep );
window.scrollTo( 0, ( currentScrollY - scrollMargin ) );
}
if (window.scrollX !== x || window.scrollY !== y) {
requestAnimationFrame(step);
}
}
step();
}