平滑滾動選擇更改jQuery

Question

我試圖在下拉選擇更改時平穩地滾動到錨點。 從其他答案中嘗試了很多代碼，但由於我沒有jquery的經驗，因此無法正常工作。 任何幫助，將不勝感激！ PS：不要介意鏈接選擇器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

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

這將平滑滾動到具有目標id的DOM元素

1000以毫秒為單位。

Answer 2

我為您提供了另一種解決方案。 制作自己的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>