Html - How to scroll to a specific element with padding using JavaScript?

kazi
March 26, 2024
250 views
0 votes
2 Answers

I’m trying to implement functionality in my HTML page where clicking a button scrolls to a specific element (#content) while maintaining a certain amount of padding from the top of the viewport. However, my current approach isn’t working as expected.

Here’s my HTML and JavaScript code:

function myFunction() {
  const element = document.getElementById("content");
  element.scrollIntoView();
  setTimeout(() => {
    window.scrollBy({
      top: -200
    });
  }, 0);
}

#myDIV {
  height: 250px;
  width: 250px;
  overflow: auto;
  background: coral;
}

#content {
  margin: 500px;
  height: 800px;
  width: 2000px;
  background-color: coral;
}

<h1>The Element Object</h1>
<h2>The scrollIntoView() Method</h2>
<button onclick="myFunction()">Scroll</button>
<p>Click "Scroll" to scroll to the top of the element with id="content".</p>
<div id="myDIV">
  <div id="content">
    <p>Some text inside an element.</p>
    <p>Some text inside an element.</p>
    <p>Some text inside an element.</p>
  </div>
</div>

I expect the page to scroll to the #content element while maintaining a 200px padding from the top of the viewport. However, the current implementation doesn’t achieve this effect. How can I modify my code to achieve the desired behavior?

Answers

You can use the parent container scrollTop to remove 200 pixels from it

const parent = element.parentNode;
parent.scrollTop = parent.scrollTop -200;

<!DOCTYPE html>
<html>
<style>
#myDIV {
  height: 250px;
  width: 250px;
  overflow: auto;
  background: coral;
}

#content {
  margin:500px;
  height: 800px;
  width: 2000px;
  background-color: coral;
}
</style>

<body>
<h1>The Element Object</h1>
<h2>The scrollIntoView() Method</h2>

<button onclick="myFunction()">Scroll</button>

<p>Click "Scroll" to scroll to the top of the element with id="content".</p>


<div id="myDIV">
  <div id="content">
  <p>Some text inside an element.</p>
  <p>Some text inside an element.</p>
  <p>Some text inside an element.</p>
  </div>
</div>

<script>
function myFunction() {
  const element = document.getElementById("content");
  element.scrollIntoView();
  setTimeout(() => {
    const parent = element.parentNode;
    parent.scrollTop = parent.scrollTop -200;
  }, 0);
}
</script>

</body>
</html>

Застосуйте css властивість scroll-margin-top:

#content {
  scroll-margin-top: 200px;
}

<!DOCTYPE html>
<html>
<style>
#myDIV {
  height: 250px;
  width: 250px;
  overflow: auto;
  background: coral;
}

#content {
  margin:500px;
  height: 800px;
  width: 2000px;
  background-color: coral;
}
</style>

<body>
<h1>The Element Object</h1>
<h2>The scrollIntoView() Method</h2>

<button onclick="myFunction()">Scroll</button>

<p>Click "Scroll" to scroll to the top of the element with id="content".</p>


<div id="myDIV">
  <div id="content">
  <p>Some text inside an element.</p>
  <p>Some text inside an element.</p>
  <p>Some text inside an element.</p>
  </div>
</div>

<script>
function myFunction() {
  const element = document.getElementById("content");
  element.scrollIntoView();
}
</script>

</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to scroll to a specific element with padding using JavaScript?

Answers