0
413
ViewsHow to use scrollTo() function in Vanilla JS?
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?
3 answers
Answer question0
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>0
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 class="over"></div>
<div id="foo">Target element</div>0
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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="fixed-top" 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>