Перемещение при помощи раскрывающегося списка по странице

Question

Помогите отредактировать код для перемещения по странице. Необходимо: после выбора пункта выпадающего списка плавный скролинг к блоку. Что-то я совсем запутался.

    $('.flowing-scroll').on( 'click', function(){ 
        let el = $(this),
            dest = el.attr('value'),
        if (dest !== undefined && dest !== '') { 
            $('html').animate({ 
                scrollTop: $(dest).offset().top
            }, 1000
            );
        }
        return false;
    });

.block1 {
  width: 100%;
  height: 30em;
  background-color: green;
}

.block2 {
  width: 100%;
  height: 30em;
  background-color: red;
}

.block3 {
  width: 100%;
  height: 30em;
  background-color: blue;
}

.block4 {
  width: 100%;
  height: 30em;
  background-color: gray;
}

.block5 {
  width: 100%;
  height: 30em;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select-block" onchange="top.location=this.value">
  <option class="flowing-scroll" value="#anchor-1">блок 1</option>
  <option class="flowing-scroll" value="#anchor-2">блок 2</option>
  <option class="flowing-scroll" value="#anchor-3">блок 3</option>
  <option class="flowing-scroll" value="#anchor-4">блок 4</option>
  <option class="flowing-scroll" value="#anchor-5">блок 5</option>
</select>
  <div class="block1" id="anchor-1"></div>
  <div class="block2" id="anchor-2"></div>
  <div class="block3" id="anchor-3"></div>
  <div class="block4" id="anchor-4"></div>
  <div class="block5" id="anchor-5"></div>

е

Answer 1

Вешать клик на option - плохая идея. Лучше отслеживайте событие change у select:

$('.select-block').on('change', function(){ 
  let dest = $(this).val();
  if (dest !== undefined && dest !== '') { 
    $('html').animate({ 
      scrollTop: $(dest).offset().top
    }, 1000);
  }
  return false;
});

.block1 {
  width: 100%;
  height: 30em;
  background-color: green;
}

.block2 {
  width: 100%;
  height: 30em;
  background-color: red;
}

.block3 {
  width: 100%;
  height: 30em;
  background-color: blue;
}

.block4 {
  width: 100%;
  height: 30em;
  background-color: gray;
}

.block5 {
  width: 100%;
  height: 30em;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select-block">
  <option class="flowing-scroll" value="#anchor-1">блок 1</option>
  <option class="flowing-scroll" value="#anchor-2">блок 2</option>
  <option class="flowing-scroll" value="#anchor-3">блок 3</option>
  <option class="flowing-scroll" value="#anchor-4">блок 4</option>
  <option class="flowing-scroll" value="#anchor-5">блок 5</option>
</select>
  <div class="block1" id="anchor-1"></div>
  <div class="block2" id="anchor-2"></div>
  <div class="block3" id="anchor-3"></div>
  <div class="block4" id="anchor-4"></div>
  <div class="block5" id="anchor-5"></div>

БЛОГ НА HUSL

Перемещение при помощи раскрывающегося списка по странице

Ответы (1 шт):