телепортирует меня вверх страницы

Внутри js:

function openCartDialog() {
renderCartContent();
document.body.style.overflow = "hidden";
document.getElementById("cartDialog").showModal();}
function closeCartDialog() {
document.body.style.overflow = "";
document.getElementById("cartDialog").close();}

function renderCartContent() {
let cart = getCookie("cart");
const cartDiv = document.getElementById("cartContent");
if (cart) {
    try {
        cart = JSON.parse(cart);
    } catch (e) {
        cart = {};
    }
} else {
    cart = {};
}
let html = "<h3>Ваш кошик</h3>";
let total = 0;
const cartKeys = Object.keys(cart);
if (cartKeys.length === 0) {
    html += "<p class='cart-empty'>Кошик порожній</p>";
} else {
    cartKeys.forEach(productId => {
        const item = cart[productId];
        const productTotal = item.quantity * item.price;
        total += productTotal;
        html += `
      <div class="cart-item">
        <img src="${item.file}" alt="${item.name}" class="cart-item-image">
        <div class="cart-item-details">
          <h4>${item.name}</h4>
          <div class="cart-item-price">
            <span class="price">${item.price} ₴ / шт.</span>
            <p class="availability"><b>В наявності</b></p>
          </div>
          <div class="quantity-controls">
            <button onclick="decreaseQuantity(${productId})">-</button>
            <p>${item.quantity}</p>
            <button onclick="increaseQuantity(${productId})">+</button>
            <span class="item-total">${productTotal} ₴</span>
          </div>
        </div>
        <button class="remove-button" onclick="removeFromCart(${productId})">×</button>
      </div>
    `;
    });
    html += `<p><strong>Загальна сума: ${total} ₴</strong></p>`;
}
cartDiv.innerHTML = html;}

Внутри css:

dialog {
border: none;
border-radius: 8px;
padding: 20px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
width: 90%;
height: 80%;
text-align: center;}

Внутри html:

   <dialog id="cartDialog">
    <div style="padding: 20px;">
      <div id="cartContent"></div>
      <hr>
      <div class="order-form"></div>
    </div>
   </div>

При открытии меня "телепортирует" в начало страницы. Можете посоветовать как это решить?