I think I see the issue – with “soap”, the link itself has
id="soaps" while with the others the same term is repeated.
<li> <a href="#soap" id="soaps">Soaps</a> </li> <li> <a href="#sanitizers" id="sanitizers">Sanitizers</a>
This means that there are double ids so it will apparently pick the first and scroll to the link itself instead of the matching anchor. If you try to keep the same format at the link that works, it should be functioning as intended. Hope that helps.