Create links that scroll the page smoothly to any id within the document.

malihu

<p><strong>Page scroll to id</strong> is a fully featured plugin which replaces browser’s “jumping” behavior with a <a href="http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo.html" rel="nofollow ugc">smooth scrolling animation</a>, when links with href value containing # are clicked. It provides all the basic tools and advanced functionality for single-page websites, in-page navigation, back-to-top links etc. with features like:</p>
<ul>
<li>Adjustable scrolling animation <a href="http://manos.malihu.gr/page-scroll-to-id-for-wordpress/#plugin-settings-scroll-type-easing" rel="nofollow ugc">duration and easing (over 30 easing types)</a></li>
<li>Link and target highlighting via ready-to-use CSS classes</li>
<li><a href="http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo.html" rel="nofollow ugc">Vertical</a> and/or <a href="http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo-horizontal-layout.html" rel="nofollow ugc">horizontal</a> scrolling</li>
<li>Scrolling from/to different pages (scrolling to target id on page load)</li>
<li>Offset scrolling by pixels or element selector with custom expressions</li>
<li>Insert link and target id buttons in post visual editor </li>
<li>Link-specific offset, scrolling duration, highlight target etc.</li>
</ul>
<p><a href="http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo.html" rel="nofollow ugc">Demo (default animation duration/easing, link highlighting etc.)</a></p>
<h4>Plugin resources, links and tutorials</h4>
<ul>
<li><a href="http://manos.malihu.gr/page-scroll-to-id-for-wordpress/" rel="nofollow ugc">Plugin homepage</a></li>
<li><a href="http://manos.malihu.gr/page-scroll-to-id-for-wordpress/2/" rel="nofollow ugc">Knowledge Base – FAQ</a></li>
<li><a href="http://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/" rel="nofollow ugc">Basic tutorial</a> – <a href="http://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/#video-tutorial" rel="nofollow ugc">Video tutorial</a>
<ul>
<li><a href="http://manos.malihu.gr/using-page-scroll-to-id-with-the-divi-builder-plugin/" rel="nofollow ugc">Using Page scroll to id with the Divi Builder plugin</a></li>
<li><a href="http://manos.malihu.gr/using-page-scroll-to-id-with-siteorigin-page-builder/" rel="nofollow ugc">Using Page scroll to id with SiteOrigin Page Builder</a></li>
<li><a href="http://manos.malihu.gr/using-page-scroll-to-id-with-wpbakery-page-builder/" rel="nofollow ugc">Using Page scroll to id with WPBakery Page Builder</a></li>
<li><a href="http://manos.malihu.gr/page-scroll-to-id-elementor-guide/" rel="nofollow ugc">Using Page scroll to id with Elementor Page Builder</a></li>
</ul>
</li>
<li><a href="https://wordpress.org/support/plugin/page-scroll-to-id" rel="ugc">Support</a></li>
</ul>
<h4>Requirements</h4>
<p>Page scroll to id requires WordPress version <strong>3.3</strong> or higher (jQuery version <strong>1.7.0</strong> or higher) and your theme <strong>must</strong> (and should) have <code>wp_head()</code> and <code>wp_footer()</code> functions. In some Microsoft Windows based web servers some plugins might produce an error 500 (depends on server/PHP configuration). To pinpoint the issue <a href="https://codex.wordpress.org/Debugging_in_WordPress" rel="nofollow ugc">enable debugging</a> in <code>wp-config.php</code> and check <code>wp-content/debug.log</code> file for relevant errors.</p>
<h4>GDPR (General Data Protection Regulation)</h4>
<p>The plugin is GDPR compliant. It does not use or store any kind of user information/data. In fact, it’s functionality has nothing to do with user data (personal or otherwise). So there’s that.</p>
<h4>Quick usage and tips</h4>
<ol>
<li><a href="https://wordpress.org/plugins/page-scroll-to-id/installation/" rel="ugc">Install the plugin</a>. </li>
<li>The plugin is enabled by default on your WordPress Menu links, so you can start adding custom links and set their URL to the id/target you want to scroll to. </li>
<li>Create id targets within your content using plugin’s “Insert Page scroll to id target” button and/or shortcode (see contextual “Help” menu in plugin settings page) in post visual/text editor. Create targets in widgets areas using “Page scroll to id target” widget. </li>
<li>Create links within your content using plugin’s “Insert/edit Page scroll to id link” button and/or shortcode in post visual/text editor. You can also add the class <code>ps2id</code> on any existing link you want to be handled by the plugin. </li>
</ol>
<p>For more info <a href="http://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/" rel="nofollow ugc">see plugin’s basic tutorial</a></p>
<h3>License</h3>
<p>MIT</p>
<p>You should have received a copy of the MIT License along with this program.<br />
If not, see <a href="http://opensource.org/licenses/MIT" rel="nofollow ugc">http://opensource.org/licenses/MIT</a>.</p>
<h3>Donate</h3>
<p>If you like this plugin and find it useful, consider making a <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=UYJ5G65M6ZA28" rel="nofollow ugc">donation</a> :).</p>
<h3>Plugin previous/other versions</h3>
<p><a href="http://manos.malihu.gr/page-scroll-to-id-for-wordpress/#plugin-versions" rel="nofollow ugc">All plugin versions</a></p>
<h3>Other/external resources</h3>
<ul>
<li><a href="https://www.virfice.com/how-to-create-anchor-links-on-wordpress-gutenberg-editor/" rel="nofollow ugc">How to create anchor links on WordPress Gutenberg editor</a></li>
<li><a href="http://manos.malihu.gr/using-page-scroll-to-id-with-the-divi-builder-plugin/" rel="nofollow ugc">Using Page scroll to id with the Divi Builder plugin</a></li>
<li><a href="https://www.youtube.com/watch?v=ZJt7-0W-DeE" rel="nofollow ugc">One Page WordPress Smooth Scrolling Menu – How to Use Page Scroll to ID Plugin 2017</a></li>
<li><a href="http://sridharkatakam.com/smooth-scrolling-page-sections-using-page-scroll-id/" rel="nofollow ugc">Smooth scrolling between page sections using Page scroll to id</a></li>
<li><a href="http://www.pootlepress.com/2013/02/video-tutorial-a-beginners-guide-on-how-to-create-a-single-page-wordpress-website/" rel="nofollow ugc">Video tutorial: How to create a single page WordPress website</a></li>
<li><a href="http://snifflevalve.com/tutorials/generatepress-elementor-page-scroll-id-one-page-website/" rel="nofollow ugc">GeneratePress – Elementor – Page Scroll to ID – One Page Website</a></li>
<li><a href="https://www.youtube.com/watch?v=XZ4SbV3aZb8" rel="nofollow ugc">Onepage WordPress – Page scroll to iD plugin</a></li>
</ul>


Page scroll to id


This works well.  As someone else noted, the verbose documentation makes it seem harder than it actually is.


Alternatives to Page scroll to id

Top alternatives