scrollIntoView() not activating-CodePudding

I am writing a page, where you click a button, a new div gets created and appended to the end of the page. After the div is drawn I want the page to scroll to it, but it's not working.

All the drawing etc. all works fine.
Inside the console, when I manually execute the scrollIntoView function on any of the elements, it works just fine, i.e., the screen does indeed scroll to that div just fine.

Somehow this clicking thing is ruining the scroll? Maybe the browser doesn't allow you to scroll to something else right after you release the click?

Here's the codesandbox: https://codesandbox.io/s/wild-framework-uiz9t0?file=/src/index.js:0-232

Here's the code copied over from codesandbox.

html

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>

    <a href="#" id="btn-scroll" >scroll</a>

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <div
      style="height: 100px; width: 100px; background-color: yellow;"
      id="yellow_box"
    >
      yellow box
    </div>

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <script src="src/index.js"></script>
  </body>
</html>

javascript

function scrollYellowBox() {
  const box = document.getElementById("yellow_box");
  box.scrollIntoView();
}

const btn = document.getElementById("btn-scroll");
btn.addEventListener("click", scrollYellowBox);

Found a tutorial here where it seems to work on a click: https://www.javascripttutorial.net/javascript-dom/javascript-scrollintoview/. But don't see how what they're doing is different from what I'm doing...

Update: so seems like there's a behavior where if you click on a link / button, the browser automatically scrolls to that thing you just clicked. Which I guess makes sense but in this case I need to override it somehow?

Thanks!

CodePudding user response：

Your button is not really a button: <button /> but a link <a />. By default the link will always try to navigate to the location defined by the href attribute. In your case this causes the browser to scroll to the yellow box and then back to the root of the document.

You can fix the issue by either making the button a real button like so:

<button  id="btn-scroll" >scroll</button>

You can also prevent the default behavior of the link or any other clickable element; by calling preventDefault() on the passed event at the beginning of the event handler callback, like so:

function scrollToYellowBox (e) {
  e.preventDefault()
  const box = document.getElementById("yellow_box");
  box.scrollIntoView();
}

CodePudding user response：

Your btn is a link pointing to #, which default behavior is scrolling the page to top. Change the link to a real button, or prevent the link default behavior:

function scrollYellowBox(e) {
  // stop the default behavior
  e.preventDefault();
  // your other logics
  // ...
}