Javascript Scroll To Element - Topic

Member

Posts: 6,554

Joined: Feb 7 2018

Gold: 36.00

Dec 12 2019 02:33am

Currently I'm using the scrollTo method to jump to an element on my page, but I'm trying to get it to smooth scroll.

I looked at scrollIntoView because they have options like this:

Code

elmnt.scrollIntoView({ behavior: 'smooth', block: 'end'});

I was wondering if scrollTo allowed the same options

This is my current code:

Code

document.querySelector(".cards").onclick = function() {
const x = 0;
const y = 550;
window.scrollTo(x, y);

Since I'm using exact cords for the jump, can the same be done with scrollIntoView
I also saw that both options aren't supported on Safari, safari IOS and edge tho. Is there another way to achieve this without a library

Strickland

Member

Posts: 6,554

Joined: Feb 7 2018

Gold: 36.00

Dec 12 2019 02:55am

edit

This post was edited by Strickland on Dec 12 2019 02:57am

Klexmoo

Member

Posts: 12,703

Joined: May 17 2013

Gold: 2,935.00

Dec 12 2019 10:21am

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

Code

window.scrollBy({ left: x, top: y, behavior: 'smooth' });

This post was edited by Klexmoo on Dec 12 2019 10:21am

Strickland

Member

Posts: 6,554

Joined: Feb 7 2018

Gold: 36.00

Dec 12 2019 12:05pm

Quote (Klexmoo @ Dec 13 2019 05:21am)

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

Code

window.scrollBy({ left: x, top: y, behavior: 'smooth' });

Safari really doesn't like these scroll parameters

I started looking into smooth-step algorithm, since it seems I need to change the value over time in order to get this working on safari

I noticed safari doesn't even support

Code

scroll-behavior: smooth;

which is a shame

Klexmoo

Member

Posts: 12,703

Joined: May 17 2013

Gold: 2,935.00

Dec 12 2019 12:06pm

Quote (Strickland @ 12 Dec 2019 19:05)

Code

scroll-behavior: smooth;

which is a shame

No luck then, you need to implement it yourself.

Go Back To Programming & Development Topic List