smoothscroll: Smooth scroll into view not working in >= Chrome 52

I found that passing block and inline arguments makes the function work in Chrome.

top.scrollIntoView({ behavior: 'smooth' });

The above doesn’t work, while the code below does.

top.scrollIntoView({
  behavior: 'smooth',
  block: 'start',
  inline: 'nearest'
});

It worked for me after I switch this option to active:

document.querySelector(target).scrollIntoView(); document.querySelector(target).scrollIntoView({ behavior: ‘smooth’});

Tried both the ways in chrome Version 81.0.4044.138(official-build). but no luck, smooth scroll is not working

Try putting it inside a setTimeout, it worked for me in that way.

Does not work in Chrome 60.0.3112.101 (Official Build) (64-bit) either. While it is an issue in Chrome, shouldn’t this polyfill take care of it until the new Chrome version is released?

Try putting it inside a setTimeout, it worked for me in that way.

foo.scrollIntoView({ behavior: ‘smooth’, block: ‘center’ }); ----> old Do not scroll anything at all.

setTimeout(() => foo.scrollIntoView({ behavior: ‘smooth’, block: ‘center’ }), 0); -----> new Tryed, it’s really start scrolling but in in 70% of cases position that scrolls - incorrect. Anyone knows solution? And i think it`s problem appear cuz of last chrome update?

It didn’t work for me on “document.ready” but ok on other event. For Chrome, on load document :

setTimeout(function () { foo.scrollIntoView({behavior: ‘smooth’, block: “center”}); }, 100);

Changing behavior to behaviour worked for me in Chrome.

document.querySelector(‘.className).scrollIntoView({behavior: “smooth”}); -> not working document.querySelector(’.className).scrollIntoView(); -> working

Similarly for the Viewchild reference

this.scroll.nativeElement.scrollIntoView({block: ‘end’, behavior: “smooth”})-> not working this.scroll.nativeElement.scrollIntoView({behavior: “smooth”})-> not working this.scroll.nativeElement.scrollIntoView() -> working

Using group.scrollIntoView({behavior: "smooth"}); does not work, while group.scrollIntoView(); does. Chrome Version 65.0.3325.181 (Official Build) (64-bit)

@leocavalcante , because it can contribute to a better UX, and if we would use it, and the user has the option turned off, then the site or app will look badly done.

This is interesting, I did a few other tests and it seems that if an element consumes the whole viewport or more, it does not scroll, while if any part of the viewport is not consumed, it will scroll to the top of the element - try this from the very bottom of this github page, then from mid-way down the page:

document.getElementsByClassName('application-main')[0].scrollIntoView({ behavior: 'smooth' })

To be clear there is still a bug here: that ‘smooth’ does not work consistently to non-smooth. Whatever logic is decided upon, the smooth option should do exactly as the non-smooth option, just with smoothness or not. Right now they behave differently. If you try the above code without the smooth, u will see it will always scroll to top.

After 4 years, this still doesn’t seem to work…

This works every single time, without a timeout, called with react-animate-height onAnimationEnd:

elementRef.current.scrollIntoView(true)

This doesn’t scroll as expected. It seems to even scroll in the opposite direction:

elementRef.current.scrollIntoView({
  behavior: 'smooth',
  block: 'start',
  inline: 'nearest',
});

I’ve also tried using CSS scroll-behavior: smooth, which has the same problems as the above method. I’d expect that it scrolls to the same location whether animated or not.

@dietergeerts if the user don’t want to see it animated/smooth, why you should force it to be? ¯_(ツ)_/¯

Yeah still facing ScrollIntoView() problem, how to fix it, I am unable to implement in basic Vanilla Js also. any suggestions

@jmengere see this comment: https://github.com/iamdustan/smoothscroll/issues/28#issuecomment-699150577

Try putting it inside a setTimeout, it worked for me in that way.

foo.scrollIntoView({ behavior: ‘smooth’, block: ‘center’ }); ----> old Do not scroll anything at all.

setTimeout(() => foo.scrollIntoView({ behavior: ‘smooth’, block: ‘center’ }), 0); -----> new Tryed, it’s really start scrolling but in in 70% of cases position that scrolls - incorrect. Anyone knows solution? And i think it`s problem appear cuz of last chrome update?

document.querySelector(target).scrollIntoView(); document.querySelector(target).scrollIntoView({ behavior: ‘smooth’});

Tried both the ways in chrome Version 81.0.4044.138(official-build). but no luck, smooth scroll is not working

Disclaimer: I’m not using iamdustan’s smooth scroll polyfill, but I ran into this same problem with vanilla javascript in Chrome, and found this Issue (and not much else) in my search for a solution. This fix seems to be working consistently for me.

My fix was to use preventDefault() in order to get the smooth behavior to work. I was having weird and inconsistent behavior with other element scroll functions as well, but this seemed to help me out with all of the variations of element.scroll() I had tried. Here’s a look at my code:

handleSmoothScroll(e) {
    let id = e.target.parentNode.getAttribute("href").slice(1,); // Gets the id for the element I want to scroll to
    document.getElementById(id).scrollIntoView({
      behavior: "smooth"
    });
    e.preventDefault(); // This is very necessary so the normal anchor snapping doesn't occur.
  }

I am using Chrome 68.0.3440.106 on macOS. My fix (under my circumstances at least) works in Firefox 61.0.2 as well. Hopefully this helps someone.

@fwitkowski 👉 https://github.com/iamdustan/smoothscroll#force-polyfill-implementation