onlinewebgrow

<p>Custom Anchor Block enhances your WordPress editor by adding a versatile anchor link block. Create smooth-scrolling anchor links that can be styled as either text or buttons with fully customizable colors and styles.</p>
<p>Key Features:<br />
* Create anchor links as text or buttons<br />
* Fully customize button colors (background, text, and border)<br />
* Choose from different button styles (Primary, Secondary, Outline)<br />
* Select button sizes (Small, Normal, Large)<br />
* Multi-language support (English and Spanish available)<br />
* Easy to use interface integrated with the block editor<br />
* No coding knowledge required</p>
<p>Perfect for:<br />
* Long-form content navigation<br />
* FAQ sections<br />
* Table of contents<br />
* Landing pages<br />
* Product documentation<br />
* Course materials</p>
<h3>Usage</h3>
<ol>
<li>Add a heading or paragraph where you want users to scroll to</li>
<li>Set an HTML anchor ID in the block’s Advanced settings (e.g., “section1”)</li>
<li>Add the Custom Anchor Block where you want the link to appear</li>
<li>Enter the same anchor ID</li>
<li>Choose between text or button style</li>
<li>Customize colors and appearance as needed</li>
</ol>
<h3>Development</h3>
<p>This plugin is developed using modern JavaScript and build tools. The source code is available in the <code>/src</code> directory.</p>
<h4>Build Tools</h4>
<ul>
<li>Node.js and npm are required for development</li>
<li>The plugin uses @wordpress/scripts for building</li>
</ul>
<h4>Development Setup</h4>
<ol>
<li>Clone the repository</li>
<li>Install dependencies:<br />
   <code>npm install</code></li>
<li>For development with auto-rebuild:<br />
   <code>npm run start</code></li>
<li>For production build:<br />
   <code>npm run build</code></li>
</ol>
<h4>Source Files</h4>
<ul>
<li><code>/src/index.js</code> – Main JavaScript source code for the block editor containing React components and block registration</li>
<li><code>/src/style.css</code> – Original CSS styles for both editor and frontend display</li>
</ul>
<h4>Build Output</h4>
<ul>
<li><code>/build/index.js</code> – Compiled and minified JavaScript</li>
<li><code>/build/index.asset.php</code> – WordPress dependencies and version information</li>
<li><code>/build/style-index.css</code> – Compiled and optimized CSS</li>
</ul>
<h4>Development Dependencies</h4>
<p>The plugin uses the following development tools:<br />
* @wordpress/scripts: Provides build tools and configurations for WordPress block development<br />
* Package configuration in package.json:<br />
      <code>json<br />
  {<br />
    "scripts": {<br />
      "build": "wp-scripts build",<br />
      "start": "wp-scripts start",<br />
      "format": "wp-scripts format",<br />
      "lint:js": "wp-scripts lint-js"<br />
    },<br />
    "devDependencies": {<br />
      "@wordpress/scripts": "^26.0.0"<br />
    }<br />
  }</code></p>


Custom Anchor Block

Add customizable anchor links as text or buttons with custom colors to create smooth in-page navigation in WordPress.

neilgee

<p>This plugin adds a smooth scroll effect motion to anchor links on the same page.<br />
You can apply the effect to all posts/pages or certain posts/pages and adjust scroll speed.</p>
<p>The links are bound by the <strong>id</strong> attribute.</p>
<p>For the source/origin element, link to the target like so, with a <strong>href</strong> attribute of the target <strong>id</strong> <code><a href="#example"></a></code></p>
<p>For the target element, you give it a corresponding <strong>id</strong> attribute like so – <code><h2 id="example">the target</h2></code></p>
<h3>Usage</h3>
<p>The settings are found via the dashboard Settings > Smoothscroller</p>
<ul>
<li>
<p>Select to apply to all post and pages</p>
</li>
<li>
<p>Select to have on home page only</p>
</li>
<li>
<p>Select to have on certain pages only</p>
</li>
<li>
<p>Select to have on certain posts only</p>
</li>
<li>
<p>Choose the speed of the scroll</p>
</li>
</ul>


Smoothscroller

Nice work on this plugin. Very handy and simple to implement.



Featured on iThemes Training Plugin Roundup Nov 2, 2015

This plugin adds a smooth scroll effect to anchor links on the same page. Options to add the effect globally or on certain posts/pages.

Custom Anchor Block vs Smoothscroller