Smooth Scroll on selection change jquery

Question

I am trying to scroll to the anchor smoothly on dropdown selection change. Tried a lot of code from other answers but couldnt get it to work since i have no experience with jquery. Any help would be appreciated! PS : dont mind the link selector if statements

here is my dropdown

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

and here is the jquery i am trying to implement in

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

This will scroll smoothly to the DOM element with the targeted id

1000 is in miliseconds.

Answer 2

I've got another solution for you. Make your own dropdown , in this way it is more easy for you to achieve what you want. I did all the drop down functions with JQuery , you just have to style dropdown:

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