Skip to main content

Page Anchors

Key sections now have anchor IDs for direct linking and improved navigation.

Overview​

Anchors have been added to key sections throughout the site, allowing users to link directly to specific content sections. This improves user experience and enables better internal linking.

SaaS Page Anchors​

Product Sections​

Each SaaS product has a unique anchor ID:

  • Format: #product-{product-slug}
  • Example: #product-message-center
  • Usage: /saas#product-message-center

Example Product Anchors​

<!-- Message Center Product -->
<section id="product-message-center" className="scroll-mt-20">
  <!-- Product content -->
</section>

<!-- Analytics Dashboard Product -->
<section id="product-analytics-dashboard" className="scroll-mt-20">
  <!-- Product content -->
</section>

CTA Section​

The "Be the First to Know" section has its own anchor:

  • Anchor: #be-the-first-to-know
  • Usage: /saas#be-the-first-to-know
<section id="be-the-first-to-know" className="scroll-mt-20">
  <!-- Waiting list form -->
</section>

Contact Page Anchor​

The contact form section has an anchor for direct linking:

  • Anchor: #message-us
  • Usage: /contact#message-us
<section id="message-us" className="scroll-mt-20">
  <!-- Contact form -->
</section>

Usage Examples​

<!-- Link to a specific product -->
<a href="/saas#product-message-center">View Message Center</a>

<!-- Link to waiting list -->
<a href="/saas#be-the-first-to-know">Join Waiting List</a>

<!-- Link to contact form -->
<a href="/contact#message-us">Contact Us</a>
<!-- Share a specific product -->
https://infowebplus.com/saas#product-message-center

<!-- Direct link to contact form -->
https://infowebplus.com/contact#message-us

Locale Support​

Anchors work with locale prefixes:

<!-- English -->
/en/saas#product-message-center

<!-- Spanish -->
/es/saas#product-message-center

<!-- Romanian -->
/ro/saas#product-message-center

Implementation Details​

Scroll Offset​

All anchors include scroll-mt-20 class for proper offset with fixed headers:

<section id="product-message-center" className="scroll-mt-20">

This ensures that when users click an anchor link, the content is not hidden behind the fixed navigation header.

URL-Friendly Anchors​

Anchor IDs are:

  • URL-friendly: Use hyphens instead of spaces
  • SEO-friendly: Descriptive and meaningful
  • Lowercase: Consistent casing for better compatibility
  • Slug-based: Derived from product slugs for consistency

Anchor Naming Convention​

  • Products: product-{slug}
  • Sections: {kebab-case-section-name}
  • Forms: {form-purpose} (e.g., message-us)

Benefits​

User Experience​

  • Direct linking to specific content
  • Improved navigation
  • Better sharing capabilities
  • Faster access to relevant sections

SEO​

  • Better internal linking structure
  • Improved crawlability
  • Enhanced user engagement metrics

Development​

  • Easy to implement
  • Consistent naming convention
  • Works with existing routing
  • No additional dependencies

Adding New Anchors​

When adding new sections that should be linkable:

  1. Add an id attribute to the section
  2. Use kebab-case for the ID
  3. Include scroll-mt-20 class for proper offset
  4. Document the anchor in this guide

Example​

<section id="new-feature-section" className="scroll-mt-20">
  <h2>New Feature</h2>
  {/* Content */}
</section>

Next Steps​