Scroll to Anchor

Screenshots

Are some of your readers impatient, want to skip long text and immediately jumpt to the summary? This plugin helps you to create anchors in your posts or pages and provides a smooth scrolling animation when the link to an anchor has been clicked. For more convenience the plugin adds an anchor icon to the toolbar of the visual editor. Adding a new anchor is no more than the click on that icon, after you marked a text passage or placed the cursor at the desired position of your text. A popup window will ask for a name of the anchor and then insert a shortcode into your text, which automatically gets replaced with the correct HTML in the frontend. (Need custom styling of the anchor? You may add individual CSS class names each time you insert a new anchor. If you don’t need that, just leave the field empty.) Once an anchor has been added, you can link to it: Add and select text (e.g. “Jump to the summary”), click the link icon in the toolbar and enter the name of your anchor, preceded by a pound sign, e.g. #summary. That’s all. Links may not contain spaces, but you can use them in your anchor names anyway. If you name your anchor e.g. Summary Chapter Two, you’ll see an information that the link to that anchor has been changed into e.g. #summary-chapter-two. For a better user experience, a JavaScript function replaces the typical behaviour to directly jump to the anchor. Instead the visitor of your website sees a smooth scrolling animation. (If this is too fast/slow, you can change the speed under Settings > Reading.) A couple of other settings provide just as much flexibility as you may need: If your website has a sticky header, you can set an offset for the scrolling animation. You can also choose if you want anchors to be displayed in the front end and set a descriptive expression to precede the anchor’s name. Some users reported conflicts with other plugins, which (ab-)use anchor tags for various reasons. To avoid issues, this plugin already excludes Woocommerce Tabs and Bootstrap Accordions, but you could still run into issues with themes or plugins. To deal with this, you can add one or more CSS class names for sections, in which this plugin should be disabled. Although this is a little more complicated than I hoped for, it seems to be the best workaround. I’m happy to hear your thoughts, how this might even be improved in the future. I made this plugin because I love WordPress. Period. I won’t ask for donations, no upsell, no sketch of the team. But I love to get your feedback to learn more.