Je mets en place un site Web à l'aide de Gatsby 2.2.10 et les composants Link conservent les positions de défilement de la page précédente et ne reviennent pas vers le haut lorsqu'ils cliquent dessus.
<div className="Footer__legal body">
<p>© {new Date().getFullYear()} My Nice Company</p>
<Link to="/privacy-policy">Privacy Policy</Link>
<Link to="/page-2">Page 2 Link component</Link>
</div>
Comportement attendu:
Lorsque vous cliquez sur "Politique de confidentialité", "Page 2" ou sur n'importe quelle page en bas du site Web, je m'attends à ce que la page se charge avec l'utilisateur est de retour en haut.
Comportement réel:
L'utilisateur reste à la position de défilement de la page actuelle
7 Réponses :
A trouvé une solution de contournement en convertissant la page index.js en un composant basé sur les classes, puis en ajoutant
componentDidUpdate() {
window.scrollTo(0,0);
}
Ce n'est pas le correctif le plus propre et je ne sais pas pourquoi il ne défilait pas automatiquement. à une réunion JS la semaine prochaine, je poserai donc la question et publierai un suivi si j'obtiens une réponse.
J'ai le sentiment que c'est quelque chose à voir avec mes styles, car j'ai commencé un nouveau projet et le Gatsby-cli n'a eu aucun problème. Sera refactoriser les styles pour voir si cela résout le problème.
Note: Revenant à la réponse de Michael qui suit, cela était également lié à un overflow: hidden; style que j'avais sur le corps, en supprimant également ce corrigé mon problème.
Revenant à cela après la réponse de Michael ci-dessus, cela était également lié à un style overflow: hidden; que j'avais sur le corps, la suppression de cela a également résolu mon problème.
Je suis content d'avoir pu aider. Je voudrais mentionner une petite chose: au lieu d'ajouter un commentaire, pensez à modifier votre réponse et à ajouter quelque chose comme " Remarque: ... "
@JackDavidEvans - J'avais ce problème et j'ai eu un débordement: caché sur mon corps! supprimer cela a résolu cela pour moi! Merci beaucoup!
Vous pouvez également modifier gatsby-browser.js et implémenter un hook pour chaque mise à jour de scroll:
// in gastby-browser.js
exports.shouldUpdateScroll = ({
routerProps: { location },
getSavedScrollPosition,
}) => {
const { pathname } = location
// list of routes for the scroll-to-top-hook
const scrollToTopRoutes = [`/privacy-policy`, `/page-2`]
// if the new route is part of the list above, scroll to top (0, 0)
if (scrollToTopRoutes.indexOf(pathname) !== -1) {
window.scrollTo(0, 0)
}
return false
}
Vous trouverez le code pour shouldUpdateScroll sur GitHub ou dans la documentation pour shouldUpdateScroll a > sur le site Web de GatsbyJS.
Cela a-t-il fonctionné pour vous? Je n'ai pas de chance. Tout lien que j'ouvre m'amène à la nouvelle route défilée comme je l'étais sur la page précédente.
@ jj0b Avez-vous redémarré votre commande gatsby? Les changements dans gatsby-config.js et gatsby-browser.js etc. sont effectifs après le redémarrage de votre processus de développement / service / construction.
J'ai fait. La chose qui a finalement fonctionné pour moi a été d'utiliser document.getElementById ("WhateverIdYouWantToScrollTo"). Scrol lIntoView () au lieu de window.scrollTo (0,0). Il m'est arrivé de l'utiliser dans un hook useEffect, mais je suis sûr que l'une des autres façons de déclencher cette ligne au bon moment aurait probablement fonctionné pour moi. Plus de détails ici: stackoverflow.com/questions/33188994/...
Cela a fonctionné, je viens de mettre le window.scrollTo () sans condition car je voulais l'avoir sur toutes les navigations de page.
Si vous avez défini overflow: hidden ou overflow: auto sur body , vous aurez ce problème!
Bienvenue et merci pour votre contribution. Veuillez envisager de mettre à jour votre message avec une `modification 'pour expliquer pourquoi cela se produit, ou un lien vers la documentation indiquant qu'il s'agit du comportement défini / attendu.
C'était en fait la solution pour moi - j'avais un débordement: l'automobile sur mon corps. Je ne sais pas pourquoi c'est le cas, mais j'espère que quelqu'un pourra vous expliquer pourquoi.
C'était la seule chose qui fonctionnait pour moi, merci!
Si votre page est un composant fonctionnel sans état, vous pouvez utiliser le hook useEffect pour revenir en haut de la page, en supposant que vous utilisez graphql et ainsi votre composant prend certaines données comme argument. De cette façon, chaque fois que les données changent, vous faites défiler vers le haut de la page (fonctionne de la même manière que componentDidUpdate).
const PageCmp = ({ data }) => {
...
useEffect(() => {
window.scrollTo(0,0)
}, [data])
...
}
Ok, c'est une vieille question, mais j'ai récemment été confronté au même comportement étrange. Il s'avère que mon problème était différent de toutes les autres solutions que j'ai vues jusqu'à présent sur Internet.
Gatsby utilise un package appelé gatsby-react-router-scroll . Ce paquet gère le comportement de défilement de Gatsby. Ce comportement est principalement implémenté dans Composant Scroll Handler . Ce composant ne fait que défiler vers le haut dans la méthode componentDidUpdate , et non dans celle componentDidMount . J'ai ajouté un débogueur dans la méthode componentDidMount et le composant ScrollHandler était remonté à chaque navigation.
Le correctif consistait à comprendre pourquoi ce composant était monté et remonté à chaque navigation. Dans mon cas, j'avais un composant React.StrictMode sur la fonction wrapRootElement dans mon gatsby-browser.js . La suppression de StrictMode a rendu le composant ScrollHandler stable, résolvant ainsi mon problème.
useEffect (() => window.scrollTo (0, 0), []) a résolu le problème pour moi. J'avais le problème uniquement sur Firefox mais pas sur Chrome. Identifiez la cause du problème, mais cela fonctionne correctement maintenant.
Mon problème était que j'avais html {hauteur: 100%} . La suppression de cette règle semble avoir résolu le problème.
J'ai également gatsby-plugin-transition-link dans mon projet, qui a ajouté plus de wrappers autour de mon contenu principal.
Les liens Repo et Netlify ne sont pas disponibles.