animatepress

<p>Add seamless transition effects between your pages with different captivating effects.<br />
Add personalized loaders or your logo, customize your cursor, or even implement a whimsical confetti effect on your forms. AnimatePress makes all this possible</p>
<p><strong>Demos</strong><br />
<a href="https://www.animatepress.net/demo/" rel="nofollow ugc">Click to see a demo of all transitions</a></p>
<p><strong>Free version features</strong></p>
<p>5 transitions effects available :</p>
<ul>
<li>Fade effect</li>
<li>Slide to top effect</li>
<li>Slide to right effect</li>
<li>Slide to bottom effect</li>
<li>Slide to left effect</li>
<li>Choose the color of your transition effect</li>
</ul>
<p>Add a loader to your transition</p>
<ul>
<li>Spinner effect</li>
<li>Choose the color of your spinner</li>
</ul>
<p><strong>Pro version features</strong></p>
<ul>
<li>Transitions : unlock more than 20 effects.</li>
<li>Transitions : select your custom color.</li>
<li>Transitions : Customize waiting and timing transitions.</li>
<li>Loaders : unlock more than 10 loaders.</li>
<li>Loaders : select your custom color.</li>
<li>Loaders : customize loader with your own logo.</li>
<li>Confettis : Add a confetti effect to your pages using a shortcode or Gutenberg block with 5 different styles.</li>
<li>Cursors : Customize your cursor by choosing its shape and color, adding a modern touch to your website.</li>
</ul>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/IGNJXHcM4Pg?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>


AnimatePress Free

Increase user experience on your site with nice pages transitions and other amazing effects.

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.


Couldn't be much easier

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

AnimatePress Free vs Page scroll to id