if (document.querySelector(target)) {
event.preventDefault();
document.querySelector(target).scrollIntoView({ behavior: 'smooth' });
}
以上 scrollIntoView 行为平滑不工作，即使 event.preventDefault 用于避免默认的锚标签行为。该功能在IE和firefox中有效，但在chrome版本中无效>=81。
var dropdownElement = document.getElementById('dropdown');
dropdownElement.addEventListener('change', function(ev) {
var containerChoosed = document.getElementById('container_' + this.value);
containerChoosed.scrollIntoView({
block: "center",
behaviour: "smooth"
});
});div {
border: 1px solid;
height: 400px;
margin: 16px;
}
#container_1 {
background-color: yellow;
}
#container_2 {
background-color: blue;
}
#container_3 {
background-color: green;
}
#container_4 {
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select id="dropdown">
<option value="1">Div 1</option>
<option value="2">Div 2</option>
<option value="3">Div 3</option>
<option value="4">Div 4</option>
</select>
<div id="container_1">div 1</div>
<div id="container_2">div 2</div>
<div id="container_3">div 3</div>
<div id="container_4">div 4</div>
</body>
</html>如你所见，当在下拉菜单中选择任何一个div时，它都会滚动到相应的div，但这种流畅的行为不只在chrome中有效，而且chrome的版本是81.0.4044.138(官方构建)
只是一个排版错误，属性必须是 behavior 而是 behaviour.
var dropdownElement = document.getElementById('dropdown');
dropdownElement.addEventListener('change', function(ev) {
var containerChoosed = document.getElementById('container_' + this.value);
containerChoosed.scrollIntoView({
block: "center",
behavior: "smooth"
});
});div {
border: 1px solid;
height: 40px;
margin: 16px;
}
hr {
height: 40px;
}
select {
position: fixed;
top: 0;
left: 0;
}
#container_1 {
background-color: yellow;
}
#container_2 {
background-color: blue;
}
#container_3 {
background-color: green;
}
#container_4 {
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select id="dropdown">
<option value="1">Div 1</option>
<option value="2">Div 2</option>
<option value="3">Div 3</option>
<option value="4">Div 4</option>
</select>
<div id="container_1">div 1</div>
<hr />
<hr />
<hr />
<hr />
<hr />
<div id="container_2">div 2</div>
<hr />
<hr />
<hr />
<hr />
<hr />
<div id="container_3">div 3</div>
<hr />
<hr />
<hr />
<hr />
<hr />
<div id="container_4">div 4</div>
</body>
</html>