Comment faire défiler vers le haut de la page en utilisant un JavaScript? Il est souhaitable même si la barre de défilement saute instantanément vers le haut. Je ne recherche pas un défilement fluide.
javascript
scroll
KingNestor
la source
la source
Réponses:
Si vous n'avez pas besoin du changement pour animer, vous n'avez pas besoin d'utiliser de plugins spéciaux - j'utiliserais simplement la méthode native window.scrollTo de JavaScript - passer 0,0 fera défiler la page en haut à gauche instantanément .
Paramètres
la source
window.scrollTo(0, document.body.scrollHeight);
Si vous voulez un défilement fluide, essayez quelque chose comme ceci:
Cela prendra n'importe quelle
<a>
balisehref="#top"
et la rendra lisse défiler vers le haut.la source
window.pageYOffset
serait la propriété de l'objet window e̶l̶e̶m̶e̶n̶t̶.Essayez ceci pour faire défiler en haut
la source
Meilleure solution avec une animation fluide:
Référence: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example
la source
ScrollOptions
(pour certains navigateurs): github.com/iamdustan/smoothscrollVous n'avez pas besoin de jQuery pour ce faire. Une balise HTML standard suffira ...
la source
Toutes ces suggestions fonctionnent très bien pour diverses situations. Pour ceux qui trouvent cette page par une recherche, on peut aussi donner ce un essai. JQuery, pas de plug-in, faites défiler jusqu'à l'élément.
la source
défilement fluide, pur javascript:
la source
Éditer:
Une autre façon de faire défiler avec la marge supérieure et gauche:
la source
animate
fonction, vous devez plutôt utiliser:$('html, body').animate({scrollTop:(scroll_pos)}, 2000);
en html
la source
Vraiment étrange: cette question est active depuis cinq ans maintenant et il n'y a toujours pas de réponse JavaScript vanille pour animer le défilement… Alors c'est parti:
Si vous le souhaitez, vous pouvez envelopper cela dans une fonction et l'appeler via l'
onclick
attribut. Vérifiez ce jsfiddleRemarque: il s'agit d'une solution très basique et peut-être pas la plus performante. Un exemple très élaboré peut être trouvé ici: https://github.com/cferdinandi/smooth-scroll
la source
Si vous souhaitez effectuer un défilement fluide, veuillez essayer ceci:
Une autre solution est la méthode JavaScript window.scrollTo:
Paramètres :
la source
Avec
window.scrollTo(0, 0);
est très rapide, j'ai essayé l'exemple de Mark Ursino, mais dans Chrome, rien ne se passe
et j'ai trouvé cela
testé les 3 navigateurs et cela fonctionne
, j'utilise le plan directeur css
c'est lorsqu'un client clique sur le bouton "Réserver maintenant" et n'a pas la période de location sélectionnée, se déplace lentement vers le haut où se trouvent les calendriers et ouvre une boîte de dialogue pointant vers les 2 champs, après 3sec il s'estompe
la source
Un grand nombre d' utilisateurs est recommandé de sélectionner les balises html et le corps pour la compatibilité multi-navigateur, comme suit:
Cela peut vous faire trébucher si vous comptez que votre rappel ne s'exécute qu'une seule fois. Il s'exécutera en fait deux fois car vous avez sélectionné deux éléments.
Si cela vous pose problème, vous pouvez faire quelque chose comme ceci:
La raison pour laquelle cela fonctionne est que Chrome
$('html').scrollTop()
renvoie 0, mais pas dans d'autres navigateurs tels que Firefox.Si vous ne voulez pas attendre la fin de l'animation dans le cas où la barre de défilement est déjà en haut, essayez ceci:
la source
Les vieux
#top
peuvent faire l'affaireFonctionne bien dans FF, IE et Chrome
la source
la source
Essaye ça
la source
$(document).scrollTop(0);
fonctionne également.la source
Solution non jQuery / JavaScript pur:
la source
Cela fonctionnera:
window.scrollTo(0, 0);
la source
Essayez ce code:
div => Dom Element où vous souhaitez déplacer le défilement.
time => millisecondes, définissez la vitesse de défilement.
la source
Solution JavaScript pure:
J'écris une solution animée sur Codepen
Vous pouvez également essayer une autre solution avec la
scroll-behavior: smooth
propriété CSS .la source
Pourquoi n'utilisez-vous pas la fonction intégrée de JQuery scrollTop:
Court et simple!
la source
Vous n'avez pas besoin de JQuery. Vous pouvez simplement appeler le script
en cliquant sur le bouton "Aller en haut"
Exemple de démonstration:
output.jsbin.com/fakumo#
PS: N'utilisez pas cette approche lorsque vous utilisez des bibliothèques modernes comme angularjs. Cela pourrait briser le hashbang URL.
la source
Utilisez simplement ce script pour faire défiler vers le haut directement.
la source
Si vous ne voulez pas de défilement fluide, vous pouvez tricher et arrêter l'animation de défilement fluide dès que vous la démarrez ... comme ceci:
Je ne sais pas si c'est recommandé / autorisé, mais ça marche :)
Quand utiliseriez-vous cela? Je ne suis pas sûr, mais peut-être quand vous voulez utiliser un clic pour animer une chose avec Jquery, mais en faire une autre sans animation? c'est-à-dire ouvrir un panneau de connexion administrateur en haut de la page et sauter instantanément en haut pour le voir.
la source
Motivation
Cette solution simple fonctionne de manière native et implémente un défilement fluide vers n'importe quelle position.
Cela évite d'utiliser des liens d'ancrage (ceux avec
#
) qui, à mon avis, sont utiles si vous souhaitez créer un lien vers une section, mais ne sont pas aussi confortables dans certaines situations, en particulier lorsque vous pointez vers le haut, ce qui pourrait conduire à deux URL différentes pointant vers le même emplacement ( http://www.example.org et http://www.example.org/# ).Solution
Mettez un identifiant à la balise que vous souhaitez faire défiler, par exemple votre première section , qui répond à cette question, mais l' identifiant peut être placé partout dans la page.
Ensuite, en tant que bouton, vous pouvez utiliser un lien, modifiez simplement l' attribut onclick avec un code comme celui-ci.
Où l'argument
document.getElementById
est l' identifiant de la balise à laquelle vous souhaitez faire défiler après un clic.la source
Vous pouvez simplement utiliser une cible à partir de votre lien, comme #someid, où #someid est l'ID du div.
Ou, vous pouvez utiliser n'importe quel nombre de plugins de défilement qui rendent cela plus élégant.
http://plugins.jquery.com/project/ScrollTo en est un exemple.
la source
Vous pouvez essayer d'utiliser JS comme dans ce Fiddle http://jsfiddle.net/5bNmH/1/
Ajoutez le bouton "Aller en haut" dans le pied de page:
la source
la source
Aucune des réponses ci-dessus ne fonctionnera dans SharePoint 2016.
Cela doit être fait comme ceci: /sharepoint/195870/
la source