+- Proxy Community (https://proxycommunity.com/forum)
+-- Forum: Technical Community Support (https://proxycommunity.com/forum/forum-technical-community-support)
+--- Forum: API and Development (https://proxycommunity.com/forum/forum-api-and-development)
+--- Thread: [b]"How can I smoothly scroll an element into view using JavaScript scroll into view?"[/b] or [b]"What’s the best (/thread-b-how-can-i-smoothly-scroll-an-element-into-view-using-javascript-scroll-into-view-b-%0A%0Aor-%0A%0A-b-what%E2%80%99s-the-best)
Pages:
1
2
[b]"How can I smoothly scroll an element into view using JavaScript scroll into view?"[/b] or [b]"What’s the best - webXchange77 - 27-09-2024
"Why isn’t javascript scroll into view working for me? help!"
hey guys, i’m trying to use javascript scroll into view to smoothly scroll to a div, but it’s just snapping there. no animation 😩
i’m using `element.scrollIntoView({ behavior: 'smooth' })` but it’s not smooth in some browsers??
is there a better way or a polyfill i should use?
also, does anyone know if this works on older browsers? kinda struggling here lol.
thanks in advance!
---
*ps: if u have a code snippet that works 100%, pls share!*
“” - darkScreen99 - 31-10-2024
Hey! The `behavior: 'smooth'` option in javascript scroll into view isn't supported in all browsers, especially older ones like IE.
You might wanna try a polyfill like `smoothscroll-polyfill`—just load it before your script.
Also, check if your CSS has any `overflow: hidden` on parent elements. That can mess with smooth scrolling too.
Here’s a quick fix:
```js
import smoothscroll from 'smoothscroll-polyfill';
smoothscroll.polyfill();
element.scrollIntoView({ behavior: 'smooth' });
```
Hope that helps!
“” - fastGlideX88 - 01-01-2025
ugh, smooth scrolling can be such a pain. i had the same issue last week!
turns out some browsers just ignore the `behavior: 'smooth'` flag. i ended up using a tiny library called `scroll-behavior-polyfill` and it worked like a charm.
also, make sure you’re not calling scroll into view too fast after page load. sometimes the browser needs a sec to render stuff properly.
“” - darkNodeX - 16-02-2025
If you’re open to alternatives, you could use CSS for smooth scrolling instead!
Add this to your root element:
```css
html {
scroll-behavior: smooth;
}
```
Then just use regular anchor tags or `element.scrollIntoView()`. Works in most modern browsers and way simpler than JS hacks.
Downside? No IE support, but hey, who uses IE anymore? 😅
“” - proxyRush77 - 23-02-2025
For older browsers, you might need to manually animate the scroll. Here’s a quick snippet:
```js
function smoothScroll(element) {
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
if (!('scrollBehavior' in document.documentElement.style)) {
// Fallback for older browsers
const targetPos = element.getBoundingClientRect().top;
window.scrollBy({ top: targetPos, behavior: 'smooth' });
}
}
```
Not perfect, but better than nothing!
“” - proxyVoyager77 - 17-03-2025
Pro tip: Check if your browser even supports smooth scrolling first!
```js
if ('scrollBehavior' in document.documentElement.style) {
element.scrollIntoView({ behavior: 'smooth' });
} else {
// Fallback to jQuery or something
}
```
Also, Safari can be weird with javascript scroll into view. Sometimes adding a tiny timeout fixes it:
```js
setTimeout(() => element.scrollIntoView({ behavior: 'smooth' }), 50);
```
“” - stealthVoyX99 - 21-03-2025
Honestly, I gave up on native smooth scrolling and just use GSAP’s `ScrollTo` plugin now.
It’s super reliable and works everywhere. Plus, you get way more control over the animation.
```js
gsap.to(window, { duration: 0.5, scrollTo: element });
```
Worth the extra KBs if you ask me!
“” - darkScreen99 - 24-03-2025
Hey, just ran into this yesterday! The issue might be your scroll container.
If you’re scrolling inside a div (not the window), make sure the container has `overflow: auto` or `scroll`. Otherwise, javascript scroll into view won’t work properly.
Also, try adding `block: 'nearest'` to your options. Sometimes that fixes the snapping issue.
“” - hyperNomadX - 29-03-2025
For a quick test, try this in the console:
```js
document.body.style.scrollBehavior = 'smooth';
```
If that works, then it’s definitely a browser support thing.
Otherwise, maybe your element is hidden or not in the DOM yet? Double-check with `console.log(element)` before scrolling.
“” - webXchange77 - 30-03-2025
Thanks for all the suggestions, guys!
I tried the polyfill and it kinda worked, but now Safari’s being weird. Might just switch to GSAP like someone suggested.
Also, the CSS `scroll-behavior` trick is neat—didn’t know about that!
One last q: does anyone know if `scrollIntoView` plays nice with fixed headers? Mine keeps getting cut off 😩