javascript - 选择选择选项时延迟滚动到 Div ID

Question

当从下拉列表中选择选择选项时，我希望能够滚动到特定 ID。看起来它应该非常简单，但是我在这里找不到执行我想要的示例的示例。

基本上，我在页面顶部附近有一个 div

<div id="mainimage">CONTENT</div>

然后在页面下方，出现一个选择框：

<select id="variant">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

我想做的是——一旦做出选择——让页面向上滚动到id“mainimage”。

如果可能的话，理想情况下，这将在大约半秒的延迟后发生，并且平滑滚动。

看起来应该相当简单，因为无论选择如何，页面都只需要滚动到相同的 ID。

这可以用javascript吗？

提前致谢。

标签： javascripthtmlscrolldelay

Answer 1

试试这个

$('#variant').on('change',function(){
 setTimeout(function(){ 
    $('html, body').animate({
    scrollTop: $("#mainimage").offset().top
  }, 2000);
 },500);
})