Jump to content

Back to top link with arrow in footer

Recommended Posts

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 

Screenshot 2022-09-04 at 18.01.52.png

Link to comment

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>

Link to comment

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.