Implementing smooth scrolling for internal links in WordPress

This guide provides a temporary solution for adding smooth scrolling functionality to internal links on your WordPress website, including those created by MaxiBlocks or other plugins.

Quick implementation steps

1. Download the provided "smooth-scroll.txt" file
2. Open your WordPress theme's style.css file
3. Copy the contents of smooth-scroll.txt
4. Paste the copied content at the end of your style.css file
5. Save the style.css file
6. Clear any caches if necessary

CSS code for smooth scrolling

Download: smooth-scroll.txt

/* Enable smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Disable smooth scrolling for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Optional: Adjust scrolling for fixed headers */
html {
  scroll-padding-top: 100px; /* Adjust this value based on your header height */
}

Important considerations

• Test the implementation thoroughly to ensure compatibility with your specific setup
• This is a temporary solution while MaxiBlocks develops an official implementation
• Monitor the GitHub issue for updates on the official feature

Troubleshooting

If you encounter any issues during implementation:

1. Double-check that the CSS was correctly added to your style.css file
2. Clear your browser cache and any WordPress caching plugins
3. Test the smooth scrolling functionality on various internal links
4. If problems persist, provide a link to the affected page for further assistance

Future developments

The MaxiBlocks team is actively working on incorporating smooth scrolling directly into the plugin. This CSS solution serves as an interim measure to enhance user experience until the native feature is released.