スムーススクロール選択変更jquery

Question

ドロップダウン選択の変更でスムーズにアンカーにスクロールしようとしています。他の回答から多くのコードを試してみましたが、jqueryの経験がないので動作できませんでした。 ご協力いただければ幸いです！ PS：ここに文

は私のドロップダウンが

<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> 

であり、ここで私はこれがスムーズにスクロールする

<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>

Answer 2

$('html,body').animate({ 
    scrollTop: $('#target').offset().top 
}, 1000); 

に実装しようとしていますjqueryのであればいけないが、リンクセレクタを気にターゲットを持つDOM要素へid

1000はミリ秒単位です。