Bootstrap Modal Dialog is auto scroll browser to top when open through JQuery

Question

I am opening a delete confirmation bootstrap modal dialog, everything is fine but when I open it through jquery, it scrolls the browser to top which I want to restrict. I want the same browser position when I open/close model window. I am using bootstrap v 3.1.1, jquery 1.12.4, ASP.NET MVC5

I have searched on the web but could not find the same problem that I am facing

bootstrap modal 

<div class="modal fade" id="DeleteConfirmation">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                    <h4>Delete Record</h4>
                </div>
                <div class="modal-body">
                    <h4>Are You Sure To Delete This Record.</h4>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-primary" data-dismiss="modal" id="r">Cancel</a>
                    <a href="#" class="btn btn-danger" onclick="ConfirmDelete()">Confirm</a>
                </div>
            </div>
        </div>
    </div>
</div>


jquery to open modal dialog:

  var DelRecord = function (TransactionId) {
            $("#TrnId").val(TransactionId);
            $("#DeleteConfirmation").modal("show");
        }

Answer 1

You need to stop the default behavior of anchor tag as with href set to # the browser scrolls to top of page. You can write you js function like:

var DelRecord = function (TransactionId,event) {
            event.preventDefault();
            $("#TrnId").val(TransactionId);
            $("#DeleteConfirmation").modal("show");
        }

and from where you are calling should be like:

<a onclick="DelRecord(transactionId,event);">Delete</a>