小弟工作正在做一個線上點餐網站，網頁中有一個 fixed NavBar，它是手工製作的 NavBar，而不是 sticky NavBar（因為父元素有用到 overflow: hidden 這個樣式）

我想點擊 navbar 上的按鈕來觸發 scrollTo 功能，就像這個 gif：

Code:

Change_nav_bar_active(category_sid) {
    let abc = document.getElementById(category_sid).offsetTop;
    window.scrollTo({ top: abc - 200, behavior: 'smooth' });
}

product_menu = () => {
    return (
        <ul className="product-menu-category scroll-x" id="Product_Category_Area" style={mystyle}>
          {
            product_data.map((product_column, index) => {
              return product_column.data.map((product_block, index2) => {
                if(index == 0 && index2 == 0) {
                  return <li className="active" id={product_block.category_code}><a className="nav-link" onClick={() => {this.Change_nav_bar_active(product_block.category_sid)}}>{product_block.category_name}</a></li>
                }else {
                  return <li id={product_block.category_code}><a className="nav-link" onClick={() => {this.Change_nav_bar_active(product_block.category_sid)}}>{product_block.category_name}</a></li>
                }
              })
            })
          }
        </ul>
    )
}

if (this.state.超過200) {
      mystyle = {
        "position": "fixed",
        "top": "48px",
        "zIndex": "80",
        "marginTop": "unset",
        "width": document.getElementsByClassName('product-menu-category')[0].offsetWidth
      };
    }else {
      mystyle = {
        "position": "unset",
        "top": "unset",
        "zIndex": "unset",
      };
    }

我使用 onClick={() => {this.Change_nav_bar_active(product_block.category_sid)}} 來觸發它

但它只會在我第一次點擊時滾到正確的位置，如果我第二次點擊相同的類別，它會出現一點點偏移的狀況，但是在第二次之後的點擊，scrollTo 不會做任何事情

我想知道是因為我把 navbar 設定了 fixed 的關係，導致它在滾動的時候會被 navbar 吃掉，第二次才是它最正確的位置嗎？

謝謝各位大神指點