Anchor smooth scroll plugin for WordPress

Плавный скроллинг при клике на якоря в меню WordPress

Anchor smooth scroll  plugin ads smooth scroll behavior by clicking on anchors in WordPress menu or elsewhere.

Plugin features:

  • Lightweight and fast;
  • Scrolling when clicking on an anchor link from another page;
  • Adjustable vertical offset in pixels or by watching element above;
  • Adjustable scroll speed;
  • Possibility to add scroll to own anchors via css sector;
  • Possibility to override WordPress theme scripts handling anchors in menu or enable plugin only on loading url with anchor;
  • Removes WordPress bug, when all anchors in menu on current page are highlighted

Plugin settings:

anchor smooth scroll settings

How to add anchor link in WordPress menu:

To add an anchor link in the WordPess menu go to the side menu Appearance->Menus:

anchor in menu

Then add Custom Links.

How to find element ID in the HTML 

Anchors links to elements ID in the HTML code.  To find ID there open developer tools in the browser (for Chrome it is "F12").

Then select target element (ctrl+shift+c to activate the picker in Chrome):

find anchor in browser

In this case, the header has no ID, so you need to add an ID. The header code will look like this:

<h2 id="anchor-id">Plugin features</h2>

Then add anchor in WordPress menu via concatenation of current page 'URL' + '/' + '#' + 'ID-string':

Add smooth scroll behavior to own anchor links not in menu

To add smooth scroll to your own anchor links for example created in post editor add to such link CSS class (e.g. <span class="my-own-anchor" >Yummy</span>) then add this class to special field in plugin settings ('.my-own-anchor').

Insert anchor in WordPress editor

The plugin adds an anchor button to the TinyMCE editor toolbar. You can write the name of the anchor, and paste it in any place of the edited text:

Insert anchor in WordPress editor


Updated: 26.11.2018

Did this plugin help you? Rate it!
(No Ratings Yet)

Any suggestions for improving the plugin? Leave them in the comments.

Leave a Reply

Your email address will not be published. Required fields are marked *