我正在制作一个网站，并编写了JavaScript代码来将一个元素滚动到视图中，我按下按钮的次数越多，滚动到视图中的元素的ID就应该越高。它在Edge和Firefox上可以正常工作，但在Chrome中，它只在第一次工作，之后它拒绝滚动，即使元素的ID正在增加。如果有人能帮助我解决这个问题，我将不胜感激。
这是JS代码：

document.addEventListener("DOMContentLoaded", function () {
    const scroll_button = document.getElementById("scroll_button");
    var scrollnum = 4

    function scrollFunction() {
        console.log(scrollnum)
        const product = document.getElementById(scrollnum);
        // Scroll the element into view, with smooth behavior
        product.scrollIntoView({
            behavior: "smooth",
            block: "start"
        });
        scrollnum += 2
    }
    if (scroll_button) {
        scroll_button.addEventListener("click", scrollFunction);
    }
})

这是HTML代码的一部分：

<div class="col product_row">
<!-- <div class="product_row"> -->
<div class="col-md-4 mb-2" id="1">
    <div class="card">
        <img src="./admin_area/product_images/apple.webp" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">Apple</h5>
            <p class="card-text">tasty</p>
            <a href="index.php?add_to_cart=4" class="btn btn-info">Add to basket</a>
            <a href="product_details.php?product_id=4" class="btn btn-secondary">View more</a>
            // <a href="#4" class="btn btn-secondary">Scroll</a>
        </div>
    </div>
</div>
<div class="col-md-4 mb-2" id="2">
    <div class="card">
        <img src="./admin_area/product_images/AZZAM yacht.jpg" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">AZZAM</h5>
            <p class="card-text">big yacht</p>
            <a href="index.php?add_to_cart=5" class="btn btn-info">Add to basket</a>
            <a href="product_details.php?product_id=5" class="btn btn-secondary">View more</a>
            // <a href="#5" class="btn btn-secondary">Scroll</a>
        </div>
    </div>
</div>
<div class="col-md-4 mb-2" id="3">
    <div class="card">
        <img src="./admin_area/product_images/Bugatti La Voiture Noire.jpg" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">Bugatti La Voiture Noire</h5>
            <p class="card-text">nice car</p>
            <a href="index.php?add_to_cart=2" class="btn btn-info">Add to basket</a>
            <a href="product_details.php?product_id=2" class="btn btn-secondary">View more</a>
            // <a href="#6" class="btn btn-secondary">Scroll</a>
        </div>
    </div>
</div>
<button id="scroll_button">Scroll</button>

我在代码中放入console.log（scrollnum），以查看scrollnum是否正在更新。它确实在我测试的所有Web浏览器中更新。我尝试在适当的位置放置一个setTimeout（）函数，以便它在滚动之前等待，但这没有效果，实际上甚至没有工作。