Back to top link with arrow in footer

Site URL: https://www.hightidehr.je

Hi there

I'm wondering if someone could help me with some code for a back to top button/link for the footer of a website i'm building please.

I've found some code but it is for a business/commerce plan.  I'm looking for some help for a personal plan.

The client would like something like the attached, in the footer above the logo (central).

Site password is hightidehrmelanie

Thanks in advance for any help

Sam 

Add this code to a mark down block in your site's footer, set the block for hml:

<p><a href="#top" class="t-top"><span class="arrow"></span>Top</a>
<style>
  /* Back to Top */  
.t-top {
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 15px;
    text-transform: lowercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 4px;
    position: fixed;
    right: 25px;
    bottom: 60px;
    width: 40px;
    height: 40px;
    z-index: 999;
    background-color: transparent;
    color: #000;
  filter: drop-shadow(8px 8px 8px #666666)
}
.t-top .arrow:before {
      font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "\e02d";
    text-align: center;
    display: block;
    vertical-align: middle;
    transform: rotate(-90deg);
    cursor: pointer;
    margin-left: -4px;
  filter: drop-shadow(8px 8px 8px #666666)
}
.t-top .arrow {display:inline;}
</style></p>

Hi Derek

Thank you so much for your help.  This has added in the word 'top', however no arrow.

I have tried to play about with the font size/colour/weight however it doesn't seem to accept any changes.  I'd like the font slightly bigger and bolder and also in white if possible.

Also, is it possible to have the word top centred into the block.  At the moment it's on the left of the block and I can't seem to make the block any smaller, meaning with the new fluid editor, the word top is not centered within the footer.

Any help you can give would be much appreciated.

Thanks again

Sam

On 9/5/2022 at 1:18 PM, Sam-Logie said:

Hi Derek

Thank you so much for your help.  This has added in the word 'top', however no arrow.

I have tried to play about with the font size/colour/weight however it doesn't seem to accept any changes.  I'd like the font slightly bigger and bolder and also in white if possible.

Also, is it possible to have the word top centred into the block.  At the moment it's on the left of the block and I can't seem to make the block any smaller, meaning with the new fluid editor, the word top is not centered within the footer.

Any help you can give would be much appreciated.

Thanks again

Sam

That code is missing an arrow code.

You can add it, then we will check & give the code to add arrow

18 hours ago, tuanphan said:

That code is missing an arrow code.

You can add it, then we will check & give the code to add arrow

Thanks Tuanphan.  I have added the code that Derek sent into a markdown box on my footer.  I'm just after the arrow now and also the text in white if possible (it've tried to play around with the code for the colour, to no avail)

Thanks so much for your help with this

Sam 

On 9/7/2022 at 2:39 PM, Sam-Logie said:

Thanks Tuanphan.  I have added the code that Derek sent into a markdown box on my footer.  I'm just after the arrow now and also the text in white if possible (it've tried to play around with the code for the colour, to no avail)

Thanks so much for your help with this

Sam 

Hi. You should add to Code Block. Add to Markdown, some symbols won't work.