Correct Infinite Scroll in asp.net mvc, how to implement?

Question

ASP.NET

Good afternoon. I'm trying to make a nice infinite scroll, in terms of how google recommends it. Here everything is in detail about how infinite scroll should be
https://developers.google.com/search/blog/2014/02/...

There in the article there is a link to a ready-made library, with which I, to be honest, how I couldn't figure it out

. So I'm trying to make it without any plugins. It seems to work, but two problems:
1. For some reason, the data is loaded at the moment when I scroll to the very top of the page, and not vice versa down to the end
2. How to change the url according to the Google recommendation http//bla.com/posts? id=1 where id will change when scrolling the

JavaScript page

<script src="~/lib/jquery/dist/jquery.min.js"></script>

    <script type="text/javascript">

        var pageSize = 5;
        var pageIndex = 0;

        $(document).ready(function () {
            GetData();

            $(window).scroll(function () {
                if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                    GetData();
                }
            });
        });

        function GetData() {
            $.ajax({
                type: 'GET',
                url: '/Test/GetData',
                data: { "pageindex": pageIndex, "pagesize": pageSize },
                dataType: 'json',
                success: function (data) {
                    if (data != null) {
                        for (var i = 0; i < data.length; i++) {
                            $("#container").append("<h2 style='margin: 9em 0;'>" +
                                data[i].title + "</h2>");
                        }
                        pageIndex++;
                    }
                },
                beforeSend: function () {
                    $("#progress").show();
                },
                complete: function () {
                    $("#progress").hide();
                },
                error: function () {
                    alert("Error while retrieving data!");
                }
            });
        }
    </script>

HTML

<h1>Тестовая страница</h1>



<div id="container"> </div>
<div id="progress" style="display: none">
    <img src="/img/loading.gif" alt="" />
</div>

C# (controller)

public object SerializerSettings { get; set; }
        public ActionResult GetData(int pageIndex, int pageSize)
        {
            JsonSerializerSettings jsonSerializerSettings = new JsonSerializerSettings()
            {
                ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
                ContractResolver = new CamelCasePropertyNamesContractResolver()
            };
            var sqlArticles = @"SELECT * FROM Articles";
            using (var connection = new SqlConnection(CONNECTION_STRING))
            {
                var articles = connection.Query<ArticleModel>(sqlArticles);
                var result = articles
                                .Skip(pageIndex * pageSize)
                                .Take(pageSize);

                var a = new JsonSerializerOptions();
                return new JsonResult(result, jsonSerializerSettings);
            }

        }

I would be glad for any help: and help in my unsolved problems and perhaps some ready-made solutions or new ideas. Thanks