Задержка прокрутки до Div ID, когда выбрана опция выбора - PullRequest
Новая
       23

Задержка прокрутки до Div ID, когда выбрана опция выбора

0 голосов
/ 18 февраля 2020

Я бы хотел иметь возможность прокручивать до определенного идентификатора, когда в раскрывающемся списке выбрана опция выбора. Кажется, это должно быть очень просто, однако я не могу найти здесь пример, который выполняет то, что я хочу.

По сути, у меня есть 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".

Если возможно, в идеале это должно произойти после задержки примерно в полсекунды, и прокрутите плавно.

Кажется, это должно быть довольно просто, поскольку странице просто нужно прокрутить к одному и тому же идентификатору независимо от выбора.

Возможно ли это с javascript?

Заранее спасибо.

Ответы [ 3 ]

1 голос
/ 18 февраля 2020

Попробуйте это 

$('#variant').on('change',function(){
 setTimeout(function(){ 
    $('html, body').animate({
    scrollTop: $("#mainimage").offset().top
  }, 2000);
 },500);
})
0 голосов
/ 18 февраля 2020

Попробуй вот так. Я использовал jquery внутри функции javascript. Надеюсь, это поможет 

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>
0 голосов
/ 18 февраля 2020

Вы можете попробовать это.

Я добавил 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>
...