I have a server side single page ecommerce app. I have button at the bottom that says "Load More..." that updates a page counter in the query parameters. It isn't a new page - just supposed to extend the existing to include more products. The extension works but the page moves to the top on my browser. How can I make it stay where it was?

My button:

            <div className="flex justify-center p-20">
              <button className="btn btn-accent btn-outline btn-lg" type="submit" formAction={updatePage}>Load More...</button>
            </div>

  async function updatePage(formData: FormData) {
    'use server';
    console.log("Update Page.")
    console.log("Form Data:", formData)
    const newSearchParams = new URLSearchParams();
    allSearchParams.forEach(p => {
      const opts = formData.getAll(p)
      if (opts.length) {
        console.log("Form Data:", p, opts.join(","));
        newSearchParams.append(p, opts.join(","));
      }
    })
    
    if (initialParams.search) {
      newSearchParams.append("search", initialParams.search)
    }
    newSearchParams.set("pages", ((initialParams.pages || 1) + 1).toString())

    redirect(`?${newSearchParams.toString()}`)
  }

I know it has to do with redirect() but I am not sure what else to do?

Better yet - can I make it infinite scroll?