actually, I searched the StackOverflow and I notice that there were many questions about the scrollIntoView method smooth behavior did not work in certain situations. but about me, it didn't work even in the simplest scenario, a site with minimum elements and styles. in fact, it does not work in my bigger project, but I just use it in a very simple code to see if it work there and it doesn't. I can't figure out what's the problem. I'll be appreciated if anyone tells me what's wrong with my code. html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="temp.css" />
<title>Document</title>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis
nesciunt quae, laboriosam cumque similique ex iusto ea ut! Laborum
consequatur repudiandae ut deleniti, magnam veritatis. Temporibus quae
unde at quasi.
</div>
<button>lorem</button>
<div class="space"></div>
<div class="jump-place">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia,
labore voluptates earum atque dolores omnis nobis, eaque sapiente
expedita iure nulla. Repellendus fugiat a iste impedit voluptates autem
ex eius.
</p>
</div>
<script src="temp.js"></script>
</body>
</html>
my css:
.space {
height: 1200px;
background-color: brown;
}
div {
width: 500px;
font-size: 2rem;
margin: 100px;
}
.jump-place {
border: 1px solid red;
}
my js:
document.querySelector('button').addEventListener('click', function () {
document.querySelector('.jump-place').scrollIntoView({ behavior: 'smooth' });
})
Options object for scrollIntoView not supported by Safari for now.
But you can use a polyfill https://github.com/magic-akari/seamless-scroll-polyfill