Anchor tags to jump halfway down a page in NetSuite (SuiteCommerce Advanced)

Question

Does NetSuite SuiteCommerce not support anchor tags? I want to include some links at the top of my page that let the viewer jump down to that category (on the same page). I know I have my code set up properly, but all that happens is that it tries to open a new page with no content on it:

https://www.prospectfastener.com/product-interchange

Answer 1

Using Anchor Tags with NetSuite SuiteCommerce

Bundled together a few answers from other Backbone related questions. This can be used in custom extensions or it can be placed in to SMT CMS HTML Content as an inline script.

Tested with SC 2022.1

// This breaks the function out of the try/catch for use on page
var scrollToAnchorFn = null;
// SB env keeps doubling loading inline scripts for testing
// This tests/sets its own property on the window to test against for that
if (typeof window.anchorSet === 'undefined') {
  try {
    window.anchorSet = true;
    // Call scrollToAnchor with anchor ID whenever you want to jump between points on a page
    const scrollToAnchor = (anchorId) => {
      try {
        var aTag = $(anchorId);
        $('html,body').animate({
            scrollTop: aTag.offset().top
          },
          'slow',
        );
      } catch (err) {
        console.error(err);
      }
    };

    const initAnchorScroll = () => {
      // Test if jQuery is loaded yet, if not set timeout and repeat fn
      if (window.jQuery) {
        // Check if document is already loaded and ready, run code now if dom is ready
        if (document.readyState === 'complete')
          return scrollToAnchor(PageHash);
        // Before images or styling is finished loading, move to part of dom requested which is ready
        return $(document).ready(() => {
          scrollToAnchor(PageHash);
        });
      }
      setTimeout(function() {
        initAnchorScroll();
      }, 50);
    };

    // Get our page hash
    //  const PageHash = window.location.hash;
    // Snippet demo hash
    const PageHash = '#testAnchor';

    // Initialize on page load if hash detected in url
    // Since hashes return the #, 
    // we want a length greater than 1 to ensure there is an id
    if (PageHash.length > 1) initAnchorScroll();
    scrollToAnchorFn = scrollToAnchor;
  } catch (err) {
    console.error(err);
  }
}

.fillerDiv {
  height: 100vh;
  width: 1000vw;
  background-color: #fedd00;
}

#testAnchor {
  background-color: #4285f4;
  color: #ffffff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container">
  <div class="fillerDiv"></div>
  <div id="testAnchor">this is test content down the page with anchor ID.
    <a href="#" onclick="scrollToAnchorFn('#testAnchor2');">Go to Next Anchor</a></div>
  <div class="fillerDiv "></div>
  <div id="testAnchor2">Second anchor tag</div>
  <div class="fillerDiv "></div>
</div>

---

Old Answer

I'm going to assume not, but I'd be happy to be wrong.

Note: Anchor Tags are not supported by Content Delivery.

NetSuite Applications Suite -- Understanding Content Delivery