Add animation when scroll to div ID

Question

I want to add some animation to existing script I have right now. This is simple "go to div" script which goes to specific Div when someone change the option in dropdown list, but it functions "onchange" instead of link click. Now I would like to add animation, some smooth scroll when it goes to that Div because right now it just snaps to it and customer could be disoriented, thinking what happened.

This is my script inside HEAD

<script type="text/javascript">
    function mylinkfunction(e) {
           window.location.hash="#reservation_summary";
            }       
</script>

And this is the trigger mylinkfunction(); in dropdown list, among other "onchange" triggers.

<select class="inputbox" onchange="roomsCalc(this.value);mylinkfunction();removeHash();" style="width:150px" id="roomselect'.$rowr->id.'" name="jh-select-price['.$rowr->id.']">

I've found few solutions but everything was made for onclick and when someone click on a link, tried to implement some of these but it didn't work for "onChange" trigger.

I would be very thankful for some help.

Answer 1

Add jQuery to your project (if you haven't already!) and use jQuery's .animate() function along with scrollTop to achieve the desired effect.

So the select will look something like what you already have:

<select onchange="mylinkfunction();">
  <option value="one">Uno</option>
  <option value="two">Dos</option>
  <option value="three">Tres</option>
</select>

...And mylinkfunction() will look like this:

function mylinkfunction(e) {
    $('html, body').animate({
        scrollTop: $("#reservation_summary").offset().top
    }, 2000);
}