How to scrollIntoView target id element of href to center of page using jQuery

user_16818611 0
Viewed 171

I am curious how I can scroll the target id element of an anchor tag's href to the center of the page using the scrollIntoView method.

Here is my code so far:

$("a").click(function () {
    var target = $($(this).attr("href"));
  
    target[0].scrollIntoView({
      behavior: "smooth", 
      block: "center"
    })
  });

I am able to log the targeted element to the console and use other methods to change the targeted element but can't figure out how to center it when scrolling.

Here is a Codepen with an example of what I'd like to do but instead uses scroll-margin-top: 50vh.

Anything is appreciated, Thx.

css html jquery javascript
1 Answers

Your code seems to be working for me. The issue may be with the href not being a valid css selector or the element not being available in the scope of your code.

Try adding console.log(target) to the callback function, or even logging target[0] and seeing if it is the desired target.

here is a working snippet of .scrollIntoView

(async () => {
  const $ = str => document.querySelector(str);
  const wait = t => new Promise(r => setTimeout(r, t));
  
  const section1 = $("section");
  const section2 = $("section:nth-of-type(3)");
  const options = {
    behavior: "smooth",
    block: "center"
  }
  while (true) {
    await wait(3000);
    section2.scrollIntoView(options);
    
    await wait(3000);
    section1.scrollIntoView(options);
  }
})();
body {
  margin: 0;
  height: 300vh;
  background: linear-gradient(black, lightgray);
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

section {
  height: 20px;
  width: 100%;
  background-color: rgba(30, 30, 255, 0.8);
}
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

user_79786270
Related