Faire défiler en douceur vers le haut

Question

J'ai cherché cela pendant quelques heures maintenant et je n'ai pas de solution. Je veux un défilement fluide vers le haut de la page. J'ai déjà un défilement fluide vers des ancres séparées dans la page avec un fichier .js attaché à mon site mais je ne peux pas utiliser une ancre pour le haut, car j'utilise un modèle d'un site d'hébergement gratuit avec des outils de construction de page intégrés qui ne me permettent pas de modifier au-dessus de la zone du corps.

Ici est où j'ai trouvé le défilement fluide. J'ai essayé de configurer "défilement en douceur vers un élément sans plugin jQuery" mais je n'ai aucune idée de comment l'organiser évidemment après d'innombrables tentatives. J'ai aussi utilisé window.scrollTo(0, 0); mais il défile instantanément. Merci !

En plus : http://jsfiddle.net/WFd3V/ - le code serait probablement la balise class="smoothScroll" puisque mon autre élément utilise cela, mais je ne sais pas comment le mixer avec le href="javascript:window.scrollTo(0,0);", ou tout autre chose qui pourrait ramener la page en haut sans ancre.

Answer 1

Je pense que la solution la plus simple est d'utiliser window.scrollTo:

window.scrollTo({top: 0, behavior: 'smooth'});

Si vous voulez un défilement instantané, utilisez simplement:

window.scrollTo({top: 0});

Peut également être encapsulé dans une fonction:

// Scroll To Top
function scrollToTop() {
    window.scrollTo({top: 0, behavior: 'smooth'});
}

Ou utilisé comme gestionnaire d'événement onclick:

   Scroll to Top

Answer 2

Voici ma proposition implémentée avec ES6

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};
scrollToTop();

Astuce : pour un mouvement plus lent du défilement, augmentez le numéro codé en dur 8. Plus le numéro est grand - plus le défilement est fluide/lent.

Answer 3

window.scroll({top: 0, behavior: "smooth"})

Utilisez simplement ce morceau de code et cela fonctionnera parfaitement. Vous pouvez l'encapsuler dans une méthode ou un événement.

Answer 4

Uniquement Javascript pur

var t1 = 0;
window.onscroll = scroll1;

function scroll1() {
  var toTop = document.getElementById('toTop');
  window.scrollY > 0 ? toTop.style.display = 'Block' : toTop.style.display = 'none';
}

function abcd() {
  var y1 = window.scrollY;
  y1 = y1 - 1000;
  window.scrollTo(0, y1);
  if (y1 > 0) {
    t1 = setTimeout("abcd()", 100);
  } else {
    clearTimeout(t1);
  }
}

#toTop {
  display: block;
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 48px;
}

#toTop {
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  opacity: 0.5;
  display: none;
  cursor: pointer;
}

#toTop:hover {
  opacity: 1;
}

votre texte ici

Answer 5

Il s'est écoulé un certain temps depuis la publication de cette question.

Maintenant, il est possible non seulement de spécifier un nombre à la fonction window.scroll, mais aussi de passer un objet avec trois propriétés: top, left et behavior. Donc, si nous voulons effectuer un défilement fluide vers le haut avec JavaScript natif, nous pouvons maintenant faire quelque chose comme ceci:

let button = document.querySelector('button-id');
let options = {top: 0, left: 0, behavior: 'smooth'}; // left et top sont des coordonnées
button.addEventListener('click', () => { window.scroll(options) });

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll