Conserver la position de la barre de défilement même après le rechargement à l'aide de javascript
J'ai exigence d'où, si je clique sur une case de la valeur envoyée et donc la page est rechargée. Maintenant, cliquez sur une autre case, j'ai besoin de faire défiler vers le bas, ce qui n'est pas une meilleure idée. Alors, maintenant, je veux garder ma barre de défilement position même après la page est rechargée. Existe t'il une méthode en javascript pour faire cela? J'ai essayé le code ci-dessous, mais il n'y avait pas de chance.
<input type="checkbox" onclick="myFunction()"/> One <br/>
function myFunction() {
document.body.scrollTop = 500px;
}
J'ai aussi parcouru de nombreux sites web, mais rien n'a fonctionné pour moi.
Merci de m'aider avec ce problème.
Grâce.
source d'informationauteur Shruthi Sathyanarayana
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser de stockage de session pour stocker la position puis revenir à la position quand la page est rechargée, comme ceci:
Ici, c'est le JSFiddle démo
Réglage
scrollTop
ne le faire (vous la définissez surdocumentElement
dans la plupart des navigateurs, mais surbody
sur les autres; la chose la plus simple est juste de le mettre sur les deux à la fois). Aussi, la valeur est un nombre (pas depx
).Mais vous devez le faire au bon moment, ce qui est après la page est rechargée, éventuellement après un
setTimeout
ou même dans unonload
de rappel (vous aurez besoin d'expérimenter pour comprendre ce qui fonctionne sur votre page). Voici lasetTimeout
exemple:Cependantje ne le ferais pas. Au lieu de cela, je voudrais présenter la case de valeur via ajax et de ne pas recharger la page. Même si vous faites défiler vers le bas à l'endroit où l'utilisateur a été après la recharge, c'est encore une surprise pour une page se recharge lorsque vous cochez une case (je me souviens de ce qu'Amazon l'habitude de le faire) et cela prend du temps. L'Ajax aurait laissé passer en arrière-plan sans interrompre l'utilisateur.
Il ne sera pas une bonne INTERFACE utilisateur pratique pour créer un tel comportement, vous devez essayer d'utiliser AJAX si vous souhaitez avertir serveur dès que la case à cocher est activée. Ou tout simplement utiliser le formulaire html, si vous souhaitez envoyer une réponse à d'autres éléments, comme un tas sur le serveur.
Juste au cas où, si vous voulez toujours obtenir la fonctionnalité, votre code ci-dessus ne fonctionnera pas, car dès que la page est rechargée, la totalité du dom est rechargé. Cela pourrait être réalisé en utilisant des cookies ou localstorage dans laquelle vous pouvez définir un indicateur ou une valeur (en entier) pour faire défiler. Au chargement de la page vérifier si une valeur est définie pour que le cookie particulier ou localStorage variable, puis faites défiler jusqu'à la valeur donnée. Veuillez noter que ceci est une très mauvaise pratique en termes d'INTERFACE utilisateur. Je vous recommande fortement d'utiliser ajax ou de présenter les valeurs de l'ensemble à l'aide d'un formulaire.