How to Make JavaScript Scrollintoview Smooth

Why is [scrollIntoView()] not scrolling smoothly?

I found out that there is a option in Chrome to disable/enable smooth scrolling options (which i had turned to default so it didn't work.)

To enable smooth scrolling in Chrome go to: chrome://flags/#smooth-scrolling

it all works smoothly now.

furthermore i found that there are multiple ways to scroll smoothly:

#1: in the CSS:

html, body {
  height: 100%;
  scroll-behavior: smooth;
}

#2: in the HTML itself

  <button type="button"
      onclick="document.querySelector('#projects-overview')
      .scrollIntoView({behavior: 'smooth'});">
Click Me!
  </button>

scrollIntoView Scrolls just too far

If it's about 10px, then I guess you could simply manually adjust the containing div's scroll offset like that:

el.scrollIntoView(true);
document.getElementById("containingDiv").scrollTop -= 10;

JavaScript scrollIntoView smooth scroll and offset

Is there a way to have an offset and make it scroll smoothly?

#Yes, but not with scrollIntoView()

The scrollIntoViewOptions of Element.scrollIntoView() do not allow you to use an offset. It is solely useful when you want to scroll to the exact position of the element.

You can however use Window.scrollTo() with options to both scroll to an offset position and to do so smoothly.

If you have a header with a height of 30px for example you might do the following:

function scrollToTargetAdjusted(){
    var element = document.getElementById('targetElement');
    var headerOffset = 45;
    var elementPosition = element.getBoundingClientRect().top;
    var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
  
    window.scrollTo({
         top: offsetPosition,
         behavior: "smooth"
    });
}

This will smoothly scroll to your element just so that it is not blocked from view by your header.

Note: You substract the offset because you want to stop before you scroll your header over your element.

#See it in action

You can compare both options in the snippet below.

<script type="text/javascript">
  function scrollToTarget() {

    var element = document.getElementById('targetElement');
    element.scrollIntoView({
      block: "start",
      behavior: "smooth",
    });
  }

  function scrollToTargetAdjusted() {
        var element = document.getElementById('targetElement');
      var headerOffset = 45;
        var elementPosition = element.getBoundingClientRect().top;
      var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
      
      window.scrollTo({
          top: offsetPosition,
          behavior: "smooth"
      });   
  }

  function backToTop() {
    window.scrollTo(0, 0);
  }
</script>

<div id="header" style="height:30px; width:100%; position:fixed; background-color:lightblue; text-align:center;"> <b>Fixed Header</b></div>

<div id="mainContent" style="padding:30px 0px;">

  <button type="button" onclick="scrollToTarget();">element.scrollIntoView() smooth, header blocks view</button>
  <button type="button" onclick="scrollToTargetAdjusted();">window.scrollTo() smooth, with offset</button>

  <div style="height:1000px;"></div>
  <div id="targetElement" style="background-color:red;">Target</div>
  <br/>
  <button type="button" onclick="backToTop();">Back to top</button>
  <div style="height:1000px;"></div>
</div>

How can I scrollIntoView/focus without the smooth scrolling animation? like focusing instantly on an element

scrollIntoView with no parameter should scroll instantly.

function showNextPage() {
    let currPage = parseInt(pageCounter.textContent);
    let target = document.querySelector(`[data-page="${currPage + 1}"]`);
    target.scrollIntoView();
}

Also, you should remove scroll-behavior: smooth if you have any in your element's CSS. That could also cause smooth scrolling.

---

Related Topics