How to add a back to top link with smooth scrolling in Gutenberg (Block Editor).
Add a Buttons block to the bottom of your page.
In the sidebar while the Button is selected click the Outline style.
Add the buttons text Back to top.
Adjust the Border radius.
Add a link to the button.
Select the text inside the button and click the link icon in the toolbar.
Add #top into the link control and click enter. A HTML anchor has now been added.
We need the link to have a receiving end. Scroll to the top and select the first block. In the sidebar settings select Advanced -> and in the HTML anchor write top.
Do a preview of the page/post and click the button. Click the button and notice the behavior seems to not fully be working. We will fix that by adding a CSS class to the Advanced panel CSS area.
There are a few ways to add custom CSS. Which have their own advantages and disadvantages.
Through the Customize panel.
1- Go to Appearance -> customize -> Additonal CSS.
This makes it possible to see what the CSS does right away in the right preview area.
2- If using a child theme. Go to Appearance -> Theme Editor -> (Select theme to edit) style.css file.
Add the CSS.
3- Independent of theme. Install and activate a plugin such as CodeKit – Custom Codes Editor to where one can add CSS as well as other code independent of the theme that is used.
Add the following CSS in your own preferred method. I decided to use CodeKit – Custom Codes Editor plugin (check out my tutorial).
/* Back To Top button */
/* For a smooth scrolling experience add the following. */
html {
scroll-behavior: smooth;
}
/* I added padding and font-size. */
.back-to-top {
font-size: 14px;
padding: 15px;
}
/* I added font-size, padding and border-radius. */
.back-to-top:hover {
font-size: 14px;
padding: 15px
border-radius: 26px;
}
Go back to the page/post where you added the back to top button. Select the button and in the sidebar settings in the Advanced panel -> Additional CSS class(es). Notice the is-style-outline is added because of the style that was earlier selected. Add the back-to-top class.
Update and click the Preview button to test out how it works on the frontend.
Additional modification tips
Adding text symbols.
Instead of adding words to the button one can instead add text symbols or use both. Here is a search I did: https://www.ecosia.org/search?q=symbols+text Go to: https://coolsymbol.com/ Find a symbol. Copy it and go to the WordPress backend and the page where you have a button. Click the button, and paste the text symbol beside the existing text.
Creating a reusable block.
I will create a reusable block to make it easier to reuse the button on every page of the site.
We need to click the parent of button. Click between the black inserter and the button, so a blue outline is seen. In the toolbar locate the ellipse menu (3 dot drop down icon). Click the drop down and click the “Add to Reusable blocks” option. Give the new reusable block the name: Back to top button. Then click Save. The button should now be on the bottom inside the Reusable section the Inserter panel (top left bar the + square button).
Resources:
https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
