Wie man window.scrollTo() mit einem glatten Effekt macht [closed]

Lesezeit: 4 Minuten

KolaCaine

Ich kann mit dem Folgenden zu 200px scrollen

btn.addEventListener("click", function(){
    window.scrollTo(0,200);
})

Aber ich möchte einen sanften Scroll-Effekt. Wie mache ich das?

Mögliches Duplikat von Glattes Scrollen beim Klicken auf einen Ankerlink

– Fägy

15. Februar 2017 um 23:21 Uhr
Nur ein Hinweis für zukünftige Generationen (verfügbar ab Chrome 61) „Die CSSOM View Smooth Scroll API bringt natives glattes Scrollen auf die Plattform durch eine scroll-behavior: smooth CSS-Eigenschaft oder durch die Verwendung der window.scrollTo() DOM-Scroll-Methode, die eliminiert die Notwendigkeit, dieses Verhalten mit JavaScript zu implementieren”

– Dominik

18. August 2017 um 7:47 Uhr
Platzieren Sie ein leeres Element oben auf Ihrer Seite, dann können Sie document.querySelector(‘your-element’).scrollIntoView({behavior: ‘smooth’});

– Antonio Brandao

31. Januar 2018 um 19:29 Uhr
Es ist möglich, die Verwendung zu tun. window.scrollTo({ top: 200, behavior: 'smooth' }); Ich möchte es als Antwort hinzufügen, aber die Frage ist geschlossen.

– karolus

1. August 2018 um 7:23 Uhr
DOH! US-Englisch – Verhalten: ‘smooth’ bringt Sie nirgendwo hin…

– A2D

19. September 2018 um 0:55 Uhr

netter Benutzer

2018-Aktualisierung

Jetzt können Sie einfach verwenden window.scrollTo({ top: 0, behavior: 'smooth' }) um die Seite mit einem glatten Effekt gescrollt zu bekommen.

const btn = document.getElementById('elem');

btn.addEventListener('click', () => window.scrollTo({
  top: 400,
  behavior: 'smooth',
}));

#x {
  height: 1000px;
  background: lightblue;
}

<div id='x'>
  <button id='elem'>Click to scroll</button>
</div>

Ältere Lösungen

Sie können so etwas tun:

var btn = document.getElementById('x');

btn.addEventListener("click", function() {
  var i = 10;
  var int = setInterval(function() {
    window.scrollTo(0, i);
    i += 10;
    if (i >= 200) clearInterval(int);
  }, 20);
})

body {
  background: #3a2613;
  height: 600px;
}

<button id='x'>click</button>

ES6 rekursiver Ansatz:

const btn = document.getElementById('elem');

const smoothScroll = (h) => {
  let i = h || 0;
  if (i < 200) {
    setTimeout(() => {
      window.scrollTo(0, i);
      smoothScroll(i + 10);
    }, 10);
  }
}

btn.addEventListener('click', () => smoothScroll());

body {
  background: #9a6432;
  height: 600px;
}

<button id='elem'>click</button>

Für wirklich fließende Übergänge verwenden Sie lieber requestAnimationFrame codepen.io/dsheiko/pen/XZEgXW

– Dmitri Scheiko

20. Februar 2018 um 12:11 Uhr
1 Jahr danach denke ich das scrollToweiterentwickelt sind, ist Ihr Skript für mich veraltet, da wir jetzt ein Objekt an übergeben können scrollTo so wie das : window.scrollTo({ top: 0, behavior: 'smooth' }); Und wir haben den gleichen Effekt mit weniger Zeilencode und es wird von alten und neueren Browsern unterstützt 🙂

– KolaCaine

10. August 2018 um 9:44 Uhr
@KolaCaine Danke, ich habe meine Antwort aktualisiert 🙂

– freundlicher Benutzer

17. August 2018 um 15:58 Uhr
Safari für OSX scheint das zu ignorieren behavior: 'smooth' Parameter während der Verwendung window.scrollTo.

– Peter Nagy

22. Oktober 2018 um 12:09 Uhr
@PetrNagy ja behavior: 'smooth' funktioniert auch nicht unter iOS. Ich denke, wir müssen immer noch die alte Lösung für WebKit auf Mac und iOS verwenden.

– Jonny

28. Januar 2019 um 15:33 Uhr

Myco Claro

$('html, body').animate({scrollTop:1200},'50');

Du kannst das!

Ja, ich habe recht mit Ihnen, aber Sie verwenden jQuery, und ich möchte nur Vanilla verwenden. Aber ich stimme dir zu, mit jQuery ist es einfacher

– KolaCaine

16. Februar 2017 um 2:29 Uhr
ja Bruder. das ist nur jquery, aber Sie können das verwenden. jQuery ist sehr einfach.

– Myco Claro

16. Februar 2017 um 2:31 Uhr
Ist das Problem, jQuery ist einfach .. Und ich mag es nicht, wenn es einfach ist. Ich vertiefe mein Wissen lieber in reinem JS (Vanilla) und danach kann ich jQuery verwenden. Es ist meine Philosophie

– KolaCaine

16. Februar 2017 um 2:34 Uhr
Nicht nur das, jquery kann beim Scrollen beim Ändern der Höhe von Elementen (mithilfe von .show() oder .slideDown() während dem Benutzen scrollTop() zum Beispiel). jQuery kann für schnelle/triviale Dinge nett sein, aber es ist nur eine Fassade für echte js. Sieh dir das an! pawelgrzybek.com/page-scroll-in-vanilla-javascript

– admcfajn

3. März 2018 um 0:10 Uhr
1 Jahr danach denke ich das scrollToweiterentwickelt sind, ist Ihr Skript für mich veraltet, da wir jetzt ein Objekt an übergeben können scrollTo so wie das : window.scrollTo({ top: 0, behavior: 'smooth' }); Und wir haben den gleichen Effekt mit weniger Zeilencode und es wird von alten und neueren Browsern unterstützt 🙂

– KolaCaine

10. August 2018 um 9:45 Uhr

11756800cookie-checkWie man window.scrollTo() mit einem glatten Effekt macht [closed]

#CSS #CSS-Animationen #CSS-Übergänge #Javascript #scrollen