Scroll to the top of a DIV using JavaScript/jQuery?

Question

I have a <div> popup that is shown when a link is clicked. It has scrollable content if there is overflow.

I just need to have the <div> at the top of the scrollable area if the link is clicked again. This is working perfectly in Chrome and Firefox, however in IE, it remains scrolled to the bottom of the popup.

<div id="myModal" data-role="popup" data-position-to="window" data-history="false" data-theme="a" data-corners="true" class="ui-content" style="text-align:center">
    <div class="modal-dialog">
         <div class="modal-content">
             <div id='myModalContent'></div>

             <a href="#" id="closeButton" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">OK</a>
         </div>
    </div>
</div>   

$(".anchorDetail").click(function () {
    $("#myModal").scrollTop(0);
}

Answer 1

Try this, it's done with JS and not jQuery:

document.querySelector('.anchorDetail').addEventListener('click', function() {
var myDiv = document.getElementById('myModal');
myDiv.scrollTop = 0;
});

Answer 2

Thank you all for your suggestions.

I feel so so dumb.
I was having it attempt to scroll to the top before it populated the data and opened the popup.

I moved the .scrollTop() function to after i Open the popup, and VOILA.

Thank you all again.