实际上，我搜索了StackOverflow，我注意到有很多关于scrollIntoView方法的问题平滑行为在某些情况下不起作用。但对我来说，即使在最简单的情况下，一个元素和风格最少的网站，它也不起作用。事实上，它在我的大项目中不起作用，但我只是在一个非常简单的代码中使用它，看看它是否在那里工作。我不知道出了什么问题。如果有人告诉我我的代码有什么问题，我将不胜感激。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>
我的css:
.space {
height: 1200px;
background-color: brown;
}
div {
width: 500px;
font-size: 2rem;
margin: 100px;
}
.jump-place {
border: 1px solid red;
}
我的js:
document.querySelector('button').addEventListener('click', function () {
document.querySelector('.jump-place').scrollIntoView({ behavior: 'smooth' });
})
目前Safari不支持scrollIntoView的Options对象。但是你可以使用填充https://github.com/magic-akari/seamless-scroll-polyfill