This code works in Firefox but doesn't work in Chrome. Please help me out.
Clicking on option must send to corresponded DIV.

HTML:

```
<html>

<style>
div {
  margin-top: 200px;
  margin-bottom: 200px;
}

</style>
<body>

 <form >

    <select name="myselect" id="myselect">

    <option value="#year1">anchor-1</option>
    <option value="#year2">anchor-2</option>
    <option value="#year3">anchor-3</option>
    <option value="#year4">anchor-4</option>
    <option value="#year5">anchor-5</option>

    </select>

 </form>

  <div id = year1>YEAR 1</div>
  <div id = year2>YEAR 2</div>
  <div id = year3>YEAR 3</div>
  <div id = year4>YEAR 4</div>
  <div id = year5>YEAR 5</div>

</body>
</html>

```

JQUERY:

```
$(function () {

        $("#myselect").on("click","option", function (event) {
        event.preventDefault();
        var id  = $(this).attr('value');
        var   top = $(id).offset().top;
        $('html,body').animate({scrollTop: top - 120}, 500);
    });

    });

```

Try it out at jsfiddle:

<https://jsfiddle.net/zutkh4o1/3/>