MakeITeasy Back To Top

Or, alternatively, try demo of my popup block, where everything is already set up and also back to top button is showcased: MakeITeasy popup

Go to bottom

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.

Usage

General

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.

Block themes

The best way to use plugin is using full site editing theme . 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.

Classic themes

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 echo do_blocks($content); 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 nowdoc syntax. Example for theme GeneratePress :

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:

echo do_blocks( <<<'block' <!-- wp:makeiteasy/back-to-top --> <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"><!-- wp:button {"style":{"spacing":{"padding":{"top":"12px","right":"12px","bottom":"12px","left":"12px"}},"border":{"radius":"9px"}}} --> <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> <!-- /wp:button --></div> <!-- /wp:makeiteasy/back-to-top --> block );

Important note:

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. 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.

Developers

Github repository

https://github.com/Lovor01/makeiteasy-back-to-top