joesexton00

<p>Scroll Back to Top is a WordPress plugin to add a button that appears only when users scroll down the page allowing them to scroll to the top of the page.  The plugin comes pre-configured and is fully functional on activation.  The plugin offers a number of webmaster-friendly features to completely customize the look, position, and animation.  In addition, there is a setting to allow you to put the button in preview mode so it only appears when logged in, which is great for configuration, then fully enable it for everyone to see!  This button is built on jQuery and is designed to be dead easy, without the need to modify any markup or the theme.</p>
<h4>Usage</h4>
<p>This was built for anyone to use, with no knowledge of HTML or CSS required!</p>
<ul>
<li>Install the plugin through the Plugins interface or by uploading the <code>scroll-back-to-top</code> directory to your <code>/wp-content/plugins/</code> directory.</li>
<li>Activate the Scroll Back to Top plugin.</li>
<li>You’re done, the scroll back to top button should appear on all pages after you scroll down a little bit.  If you’d like to customize the design you may continue.</li>
</ul>
<p>Optional Customization Steps</p>
<ul>
<li>A new setting page will be located within Settings > Scroll Back to Top, navigate to that page to for customization options.</li>
<li>Change enabled status, size, color, opacity, location, icon/text, or fades.</li>
</ul>
<h4>More Support</h4>
<p>More support can be found at <a href="http://www.webtipblog.com/scroll-back-top-wordpress-plugin" rel="nofollow ugc">our plugin support page</a>.</p>
<p>This plugin is developed by <a href="http://www.josephmsexton.com" rel="nofollow ugc">Joe Sexton</a></p>
<h3>Localization</h3>
<h4>Available in English</h4>
<p>Want to contribute with a translation to your language? Please contact me at joe@josephmsexton.com</p>


Scroll Back To Top

This plugin will add a button that allows users to scroll smoothly to the top of the page.

Lovro Hrust

<p>Very customizable and lightweight back to top 🔝 solution.</p>
<p>Fully compatible with <a href="https://developer.wordpress.org/block-editor/getting-started/full-site-editing/" rel="nofollow ugc">Full Site Editing</a> themes and with classic themes if block editor is enabled.</p>
<h4>How this differs from other similar plugins?</h4>
<p>This is a block, inside which you can insert any other block. This makes it utmost customizable. By default, a button block with inline image is inserted, but you can remove it and insert any other block you wish or customize default button or insert your own image. As button is a normal WordPress block, you can customize it like you would normally do, pick background color or foreground color from sidebar, choose border radius for edges, or anything else which is customizable in block editor.</p>
<h4>Features (block editor sidebar)</h4>
<ul>
<li>In the block sidebar, it is possible to choose if the block will appear both on desktop and mobile variant of page and breakpoint between the two.</li>
<li>Choose page scroll mode when clicked on button: smooth or instant.</li>
<li>Opacity of the block.</li>
<li>Duration of slow appearance (“fade in”).</li>
<li>Position of the block from bottom right corner of the browser window, in css unit by choice.</li>
<li>Go to bottom functionality.</li>
</ul>
<h3>DEMO</h3>
<h4>Test in wordpress playground</h4>
<p>Choose “Live preview” button in top left area of screen.</p>
<p>To get this working, a little effort is needed. These are the steps:</p>
<ul>
<li>Enter the admin area</li>
<li>Open site editor (Edit site in admin toolbar)</li>
<li>On the left sidebar, in AREAS, find Footer</li>
<li>Insert “Back to top” block in the footer group block (outer group block, as there are two), as the last element of group. If you insert it outside, it may appear very wide. If you inserted it in the wrong place, correct it by moving the block to position.</li>
<li>Set block alignment to right if you want it at the right side. Be carefull to set “Back to top”‘s block alignment, not alignment of the inner button.</li>
<li>You can also activate “go to bottom” functionality in the block settings sidebar to try this.</li>
<li>Save and navigate to front page. It should work.</li>
</ul>
<p>Or, alternatively, try demo of my popup block, where everything is already set up and also back to top button is showcased: <a href="https://wordpress.org/plugins/makeiteasy-popup/?preview=1" rel="ugc">MakeITeasy popup</a></p>
<h4>Go to bottom</h4>
<p>Introduced go to bottom functionality – can be turned on in block sidebar (off by default). When user scrolls down button flips down ⬇ and leads to bottom of page, when scrolled up it flips up ⬆ and leads to top of page.</p>
<h3>Usage</h3>
<h4>General</h4>
<p>Plugin provides a block called “Back to top”, which serves the commonly known purpose to take user to top of the page. By default, button appears only when user scrolls some amount down.</p>
<h4>Block themes</h4>
<p>The best way to use plugin is using <a href="https://fullsiteediting.com/" rel="nofollow ugc">full site editing theme</a>. There you can add it to footer (alternatively to header) and block will be displayed on each page with this footer. If you add it to page, it will be displayed for this page only.</p>
<h4>Classic themes</h4>
<p>As mentioned above, adding this block to page will show it only on this page. To show it on many/all pages, you have to add it to footer (or header). You can do so by creating block on one of the pages and copy its code (copy option from block menu). Then, add <code>echo do_blocks($content);</code> line in your footer (header) php template, where you replace $content with copied block content string. Content must be between single quotes, as it is string, according to rules of PHP. Or even better, use <a href="https://www.php.net/manual/en/language.types.string.php#language.types.string.syntax.nowdoc" rel="nofollow ugc">nowdoc</a> syntax.<br />
Example for theme <a href="https://wordpress.org/themes/generatepress/" rel="ugc">GeneratePress</a>:</p>
<p>First create child theme, so your code is not overwritten by theme updates. Then in footer.php, after line 13 of original footer.php of theme insert following code:</p>
<pre><code>echo do_blocks(
    <<<'block'
    
        <div id="makeiteasy-back-to-top" data-smooth-scroll="false" data-enable-on-desktop="true" data-break-point-mobile-desktop="768" data-go-to-bottom="true" style="--makeiteasy-back-to-top-opacity:0.7;--makeiteasy-back-to-top-visibility-transition-duration:0.3s;--makeiteasy-back-to-top-right:30px;--makeiteasy-back-to-top-bottom:30px" class="wp-block-makeiteasy-back-to-top">
        <div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:9px;padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCA5NiA0ODAgMjgzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im00MyAzNzktNDMtNDMgMjQwLTI0MCAyNDAgMjQwLTQzIDQzLTE5Ny0xOTd6IiBmaWxsPSIjZmZmIi8+PC9zdmc+Cg==" alt="Back to top arrow" width="24" height="24"></a></div>
        </div>
    
    block
);
</code></pre>
<p><em>Important note:</em></p>
<p>If you install block through block editor, and after creating block, you copy block code to footer and delete original block in page, plugin will be automatically uninstalled. This is handled by WordPress.<br />
Therefore, if you are using classic theme and you will use block code only in PHP, either install plugin in a classic way through plugins page or keep one copy of block active somewhere (e.g dummy draft page), to prevent automatic uninstall.</p>
<h3>Developers</h3>
<h4>Github repository</h4>
<p><a href="https://github.com/Lovor01/makeiteasy-back-to-top" rel="nofollow ugc">https://github.com/Lovor01/makeiteasy-back-to-top</a></p>

MakeITeasy Back To Top

Block based back to top. Lightweight, no dependencies, customizable and with some advanced options. Based on best block development practices.

Scroll Back To Top vs MakeITeasy Back To Top