How can I create an anchor link for a Back to Top button?

You can add a Button Block to the bottom of your page that says Back to top. Check out this guide for details on that:

Adding Button Blocks

From there, you can add an anchor link which will create the page jump when you click on the button.

This guide has details on that:

Creating Anchor Links

At the top of your home page insert a code block. In the block enter this HTML code:

<div id="Home-Page-Top"></div>

Be certain to delete the example text in the code block. Save the block.

At the bottom of the page where you want the Back To Top link to be, insert another code block. In the block enter this HTML code:

<a href="#Home-Page-Top">Back To Top↑</a>

Again, be certain to delete the example text. Save the block.

Save the page.

You should now have a link in the default style of all your other links which will take you back to the top.

If you want it styled differently, let me know how you want it to appear and what you want it to do when the mouse hovers over it. I will write some CSS code to do that.

If you do want further help, be sure to give me the url to your site.

For some examples of such a link at work, see my site at www.familyhistoryconferencenwa.org. Go to Class Descriptions. Click on one of the letters in the row of letters. You will jump to the point on the page where classes beginning with that letter are listed. At the bottom of each class description is a Top link.

To see some links on one page that will take you back to a point on another page, click on one of the instructor's name (below the class title). You will jump to a page with info about that instructor. At the bottom is a link which will take you back to the point from which you jumped.

For an example of a link with some (minimal) styling, see the Printable Version link on the Class Schedule page.

Let me know if this code works for you.

This is the link they sent me in case anyone wants to see. http://anchor-links.squarespace.com/

I didn't have time to try it yet but I can tell you that you couldn't explain simpler and better. Thank you very much. I'll give it a try and will let you know about the style. Thanks again.

@alxfyv I used your codes and created the button but you guessed right, I don't really like how it looks. Here's the link to my website http://nazlibinyildirim.com

On the home page there is a Get in Touch button. I want my back to top button look like that one if possible. It's ok if they are not completely identical but I would at least prefer them to be consistent. Also is there a way to place it in the middle? It aligns to the left.

Thanks!

In the code block where the Back To Top button is, enter

<pre><code>`<div class="back-to-top">
<a: href="#Home-Page-Top"Back To Top</a>
</div>`</code></pre>In custom CSS enter<pre><code>.back-to-top {
 display: inline-block;          /* omit for left aligned button  */
 height: 10px;
 width: 30px;
 text-align: center;
 color: #000000;
 border: solid 1px;
 border-color: #000000;
 background-color: #ffffff;
 }

.back-to-top a:hover {
 background-color: #000000;
 color: #ffffff;
 border-color: #000000;
}</code></pre><code></code>

Adjust the height and width to make the border correctly surround the text.

This should give you a centered button behaving similarly to the rest of your buttons.

Let me know whether this works for you and if you want anything changed.

@alxfyv I enter both of these to the bottom code block, the first to the HTML and the second to the CSS. Also for HTML I replace what's there with this new one, not add the new one to the one that I entered before. Did I get it right?

Hello,

I added a HTML widget  to my header and written this code : <div id="top"></div>'

and added this link to my footer menu : #top.

it works great but it just pops to the top and I want it to scroll smoothly. 

I tried adding :   scroll-behavior: smooth; but it just shows as text.

can you help me ?

thank you in advance.