I have a table in a partial view which refreshes every 5 seconds. The problem is that when it refreshes it goes back to the top and I would like to keep the same position as before refresh.

I've researched and I know that I can achieve this with something like this:

var scrollPosition = $(window).scrollTop();
// Your ajax polling code, on success you do the code below.
$(window).scrollTop(scrollPosition);

The problem is I can't figure out where exactly to incorporate this code and what it should look like as a whole.

My code is below:

<div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12" id="refresh">
                    @Html.Action("EntryEventUser", "Home"),
                </div>
            </div>
            <script>
                function loadPartialView() {
                    
                   $.ajax({
                    url: "@Url.Action("EntryEventUser", "Home")",
                    type: 'GET', // <-- make a async request by GET
                    dataType: 'html', // <-- to expect an html response
                    success: function(result) {
                    $('#refresh').html(result);
                       }
                });
                }
                
            $(function() {
                var scrollPosition = $("loadPartialView").scrollTop();
                loadPartialView(); // first time

               // re-call the function each 5 seconds
                window.setInterval("loadPartialView()", 5000);
                $("loadPartialView").scrollTop(scrollPosition);
            });
             
            </script>
            <script>
                function myFunction() {
                    var input, filter, table, tr, td, i;
                    input = document.getElementById("myInput");
                    filter = input.value.toUpperCase();
                    table = document.getElementById("myTable");
                    tr = table.getElementsByTagName("tr");
                    for (i = 0; i < tr.length; i++) {
                        td = tr[i].getElementsByTagName("td")[0];
                        if (td) {
                            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                                tr[i].style.display = "";
                            } else {
                                tr[i].style.display = "none";
                            }
                        }
                    }
                }
            </script>
        </div>
    </div>
</div>