Smooth Scrolling to the Next Section with JavaScript and [foo](#next) markdown syntax

When I write [foo](#next) markdown syntax in my content I want the reader to jump to the next section, the next anchor, on my webpage.

I want people to be able to skip longer content and "jump to the next section" on my blog posts or webpages, i.e., skipping the introduction.

This should improve the user experience and make it easier for my readers to navigate through my content.

Because, I often fail to write for the one reader across my content. While it is important to focus on one reader, often it comes that you attract more than one reader, especially when you:

• write for yourself across a wider range of topics
• write along different developmental journeys and knowledge stages
• you don’t have an editor,
• …

So you want o make it as easy as possible for those who just came for the recipe to skip to the meat on the bone.

Starting position

• I use Webflow, WebflowCMS, static sites and DecapCMS (formerly NetlifyCMS) and markdown.
• For my automatically generated TOC, I already have created anchor links in my blog post using Markdown and HTML.
• When I write [foo](#next) markdown syntax in my content I want the reader to jump to the next section, the next anchor, on my webpage.

Why this implementation?

The elegant thing about this approach here is, that we do not need an onclick attribute for our links in our blog posts to call the jumpToNextAnchor() function when clicked.

Instead we accomplish the “jumping to the next section” behavior without having to explicitly define the ID for each anchor.

We basically reserve the [foo](#next) syntax, on all the pages where we include our JavaScript solution. It will modify the behavior of all links with a #next href attribute on that page.

Implementation

My current script already generates a table of contents (TOC) by iterating over all h2, h3, and h4 elements and creating corresponding anchor links with unique IDs.

Adding an anchor class

To integrate the [foo](#next)solution with my existing TOC code, I have to modify my existing script to add an anchor class to each heading, that I can later use for the [foo](#next) functionality.

document.getElementById("content").querySelectorAll("h2,h3,h4").forEach(function(heading) {
  let headingText = heading.innerHTML.trim().toLowerCase();
  headingText = headingText.replace(/[^a-z0-9\s]+/gi, '').replace(/\s+/g, '-');
  heading.setAttribute("id", headingText);
// Add the anchor class to the heading
heading.classList.add("anchor");
const item = document.createElement("a");
item.innerHTML = heading.innerHTML;
item.setAttribute("class", "tocitem");
item.setAttribute("href", "#" + headingText);
document.querySelector("#toc").appendChild(item);
});

JavaScript for Behavior of #next href attribute

Next we want to modify the behavior of all links with a #next href attribute on the page.

When I use the foo syntax in my blog post, the link will jump to the next section.

For that we want to find the current section's heading based on the scroll position and then jump to the next heading on the page.

document.addEventListener('DOMContentLoaded', function() {
  const nextLinks = document.querySelectorAll('a[href="#next"]');
nextLinks.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault();
jumpToNextAnchor();
});
});
});
function jumpToNextAnchor() {
const anchors = Array.from(document.getElementsByClassName("anchor"));
const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
let currentAnchor;
// Find the current anchor based on scroll position
for (let i = 0; i < anchors.length; i++) {
if (anchors[i].offsetTop > currentScrollPosition) {
currentAnchor = anchors[i];
break;
}
}
// If a current anchor is found, jump to the next anchor
if (currentAnchor) {
const nextIndex = anchors.indexOf(currentAnchor) + 1;
if (nextIndex < anchors.length) {
window.scrollTo({ top: anchors[nextIndex].offsetTop, behavior: 'smooth' });
}
}
}

Bonus:

As you can see, we added a little nice smooth scrolling to the foo function as well.

Now, when you click on a foo link, the page will smoothly scroll to the next section, just like with the TOC function.

Conclusion

Now, you can use the foo syntax in your blog post, and the JavaScript code will modify the behavior of these links to jump to the next heading (anchor) on the page:

I want to add [foo](#next) to my blog post.
Section 1
This is the content of section 1.
Section 2
Skip the boring, jump to the interesting section of my article.
This is the boring content of section 2.
Section 3
This is the interesting content of section 3.

This approach will ensure that all links with #next as the href will jump the reader to the next heading on the page.