What's wrong with my code? scrollTo() goes to the wrong position when I click and anchor with href value using hash # (div element ID).

This is my code, I just want to scroll to the comment element, but still overlap on the fixed header (bootstrap 5 fixed header).

if (document.querySelectorAll('a').length) {
        document.querySelectorAll('a').forEach( anchor => {
            anchor.addEventListener('click', event => {
                let URL = event.target.href.split('#');
                
                if (typeof URL[1] != undefined) {
                    let element = document.getElementById(URL[1]);
                    let offset = element.offsetTop;
                    let navigation = document.getElementById('main-navigation').clientHeight
                    let scroll = offset - navigation;
                    window.scrollTo(0, scroll);
                }
            });
        });
    }

Anyone can help me?

CodePudding user response：

Call event.preventDefault() in the click handler, otherwise after your call to scrollTo, the page's hash will change, with an automatic scroll to the anchored element overriding yours.

document.querySelectorAll('a').forEach( anchor => {
  anchor.addEventListener('click', event => {
    let URL = event.target.href.split('#');

    if (typeof URL[1] != undefined) {
      let element = document.getElementById(URL[1]);
      let offset = element.offsetTop;
      let navigation = document.querySelector('.over').clientHeight
      let scroll = offset - navigation;
      window.scrollTo(0, scroll);
      event.preventDefault(); // avoid internal scroll to anchor
    }
  });
});

.over {
  height: 50px;
  background: salmon;
  position: sticky;
  top: 0;
}
#foo {
  margin-top: 250vh;
  height: 250vh;
}

<a href="#foo">#foo</a>
<div ></div>

<div id="foo">Target element</div>

CodePudding user response：

You can achieve that by using the scrollIntoView() function. see the below example. you have to target the element to scroll:

let i = 0;
function myFunction() {
  if(i === 0){
    const elmnt = document.getElementById("content");
    elmnt.scrollIntoView();
    i  = 1
  }
  else {
    const elmnt = document.getElementById("content2");
    elmnt.scrollIntoView();
  }
}

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

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

<p>Click the button to scroll to section.</p>

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

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

CodePudding user response：

Most importantly you need to stop the default behavior. When an internal link is clicked the default action is to jump to that link. You need to override that.

Next, we can make a couple of little tweaks. First, only select internal links with an attribute selector that selects a tags where the href start with "#". Next, instead of splitting the url from the href, grab the raw value directly from the attribute.

//Get internal links
document.querySelectorAll("a[href^='#']").forEach(function(el) {
  el.addEventListener("click", function(e) {
    //Stops the inbuild scroll
    e.preventDefault();
    //Get the id straight from the attribute
    let selector = this.getAttribute("href");
    //Get the target element
    let element = document.querySelector(selector);
    //you know the rest
    let offset = element.offsetTop;
    let navigation = document.getElementById('main-navigation').clientHeight
    let scroll = offset - navigation;
    window.scrollTo(0, scroll);
  });
});

/*CSS Purely for demo purposes.*/

.fixed-top {
  background-color: #EEE;
  padding: 15px;
}

article:first-of-type{
  margin-top:90px;
}

article {
  min-height: 50vh;
  border-bottom: 1px solid black;
}

nav {
  background-color: #ECECEC;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div  id="main-navigation">Some Top Stuff
  <nav>
    <a href="#art1">Article 1</a>
    <a href="#art2">Article 2</a>
    <a href="#art3">Article 3</a>
  </nav>
</div>

<article id="art1">
  <h1>Article 1</h1>
</article>
<article id="art2">
  <h1>Article 2</h1>
</article>
<article id="art3">
  <h1>Article 3</h1>
</article>