选择 select 选项时延迟滚动到 Div ID

Question

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

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

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

然后在页面下方，一个select框：

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

我想做的是 - 一旦创建了 selection - 让页面向上滚动到 ID "mainimage".

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

看起来应该相当简单，因为无论 selection 是什么，页面只需要滚动到相同的 ID。

这可以用 javascript 实现吗？

提前致谢。

Answer 1

试试这个

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

Answer 2

你可以试试这个。

我加了CSS滚动流畅，也可以改JS只是看动态

document.getElementById("select").onchange = function(){
  if(this.selectedIndex == 0){
     window.location.hash = '#section1';
  } else {
    window.location.hash = '#section2';
  }
}

html {
  scroll-behavior: smooth;
}
* {
margin-bottom: 300px;
}
#section1 {
height: 500px;
background-color: red;
color: white;
}

#section2 {
height: 500px;
background-color: blue;
color: white;
}

<select id="select" name="sections">
  <option>Section 1</option>
  <option>Section 2</option>
</select>

<div id="section1">
Section 1
</div>

<div id="section2">
Section 2
</div>

Answer 3

这样试试。我在 javascript 函数中使用了 jquery。希望对你有帮助

function myFunction() {
  var x = document.getElementById("test").value;
  document.getElementById("mainimage").innerHTML = "You selected: " + x;
   setTimeout(function(){ 
    $('html, body').animate({
    scrollTop: $("#mainimage").offset().top
  }, 2000);
 },500);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="mainimage">welcm to mainimage </p>

<p>Select a new car from the list.</p>
<!-- M using br tags since i dont have content to be placed here .. since to see scrolling we need some content to be here to fill up the page -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<select id="test" onchange="myFunction()">
  <option value="Audi">Audi</option>
  <option value="BMW">BMW</option>
  <option value="Mercedes">Mercedes</option>
  <option value="Volvo">Volvo</option>
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

选择 select 选项时延迟滚动到 Div ID

Delayed scroll to Div ID when select option is chosen

html

javascript

scroll

delay