javascript - 平滑滚动选择更改 jquery

Question

我试图在下拉选择更改时平滑地滚动到 anchor 。尝试了很多来自其他答案的代码，但由于我没有使用 jquery 的经验，所以无法让它工作。 任何帮助，将不胜感激! P.S:不要介意链接选择器 if 语句

这是我的下拉列表

<select class="form-control " id="dropDownSelect" onchange="location = this.value;">
                                    <option value="#">Hotel Selection</option>
                                    <option value="#ecoHotel">EcoName</option>
                                    <option value="#luxuryHotel">LuxuryName</option>
                                </select>

这是我要在其中实现的 jquery

<script>


    $("#dropDownSelect").change(function() {
        console.log(this.value);

        // Here Should be my smoothscroll       

        if (this.value === "#luxuryHotel") {
            $("#inqLink").attr('href', "http://www.google.com");
        }
        else{
            $("#inqLink").attr('href', "package-dentmodern-hollywoodsmile-inquire.html");
        }


    });




</script>

Answer 1

我为您准备了另一个解决方案。制作你自己的dropdown，这样你更容易实现你想要的。我用 JQuery 做了所有的下拉功能，你只需要设置下拉菜单的样式:

$(document).ready(function(){

  $('.target-click').click(function(){
   $('.hidden-drop').slideToggle();
  })
      $('nav  li a').click(function(e) {
      setTimeout(function(){
         $('.hidden-drop').slideUp();
      }, 200);
    $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top
    }, 600);
    return false;
  });
  });

select {
  margin-bottom: 30px;
}
#ecoHotel {
  background-color: lightgreen;
}
#luxuryHotel {
  background-color: lightgrey;
}
.page {
    display: block;
  height: 100vh;
    width: 100%;
    transition: all .3s ease;
}
.hidden-drop {
  display: none;
}
ul li {
  cursor: pointer;
  list-style: none;
}
ul {
padding: 0;  
}
span.target-click {
  color: #444;
    border: 1px solid #ddd;
    background-color: #f7f7f7;
    height: 44px;
    display: inline-block;
    line-height: 44px;
    padding-left: 10px;
    padding-right: 10px;
}

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

  <nav>
    <ul> 
     <li>
     <span class="target-click">Hotel Selection</span>  
     <ul class="hidden-drop">
       <li><a href="#ecoHotel">EcoName</a></li>
       <li><a href="#luxuryHotel">LuxuryName</a></li>
   </ul>
   </li>
</ul>
</nav>
                                
 <div id="ecoHotel" class="page">Eco Hotel Section</div>
 <div id="luxuryHotel" class="page">Luxury Hotel Section</div>