title: scrollIntoView whole page shifting down
body: <p>I want to build an indexed letters. When I click the letter (for example A,B,C). It should be scrolling to the belongs title. I used scrollIntoView here. Everythings okey except "block:start". When I want to the scrolling to title of start, whole page scrolling with container. </p>
  
  <p>Here my gif about issue</p>
  
  <p><a href="https://i.stack.imgur.com/we4NJ.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/we4NJ.gif" alt="enter image description here"></a></p>
  
  <p>Here my html &amp; css &amp; javascript code.</p>
  
  <pre><code>const scrollTo = id =&gt; {
  let ref = document.getElementById(id)
  if (ref /* + other conditions */) {
    ref.scrollIntoView({
      behavior: "smooth",
      block: "start",
      inline: "start",
    })
  }
  </code></pre>
  
  <p>}</p>
  
  <pre><code>&lt;div className="glossary"&gt;
      &lt;div className="glossary-items grid"&gt;
        &lt;div className="d-flex "&gt;
          &lt;div className="glossary-letters "&gt;
            &lt;ul&gt;
              {letter.map(item =&gt; (
                &lt;li onClick={() =&gt; scrollTo(item)}&gt;
                  &lt;a&gt; {item}&lt;/a&gt;
                &lt;/li&gt;
              ))}
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div className="glossary-titles"&gt;
            &lt;ul&gt;
              {glossary.map((item, index) =&gt; (
                &lt;div key={item.group}&gt;
                  &lt;li id={item.group}&gt;{item.group}&lt;/li&gt;
                  {item.children.map((item2, i) =&gt; (
                    &lt;li key={i}&gt;
                      &lt;Link
                        activeClassName="glossary-titles-active"
                        to={`/en/sozluk/${item2.first_name + item2.id}`}
                      &gt;
                        {item2.first_name}
                      &lt;/Link&gt;
                    &lt;/li&gt;
                  ))}
                &lt;/div&gt;
              ))}
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div className="glossary-content ml-5"&gt;
          &lt;Router&gt;
            &lt;Glossary path="en/sozluk/:id" /&gt;
          &lt;/Router&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>