How to add scroll to top function on my website

Site URL: https://www.anqi-wu.com/

hello! i'd like to add a scroll to top function on my website (placed on the bottom right hand side of the website). any help on coding for custom css to add this function to my website would be greatly appreciated!

i'd like to use this icon for my scroll to top button:

thank you!

The icon is error. Can you check it again?

To add scroll to top, you can follow this guide

On 7/13/2021 at 7:52 AM, tuanphan said:

The icon is error. Can you check it again?

To add scroll to top, you can follow this guide

 

Hello Tuan,

Here is the icon png:

Unfortunately my plan does not allow me to add code to the footer, can it still work with just using the custom css?

Thank you!

On 7/21/2021 at 8:45 AM, MissChi said:

Hello Tuan,

 

Here is the icon png:

Unfortunately my plan does not allow me to add code to the footer, can it still work with just using the custom css?

Thank you!

With your plan, edit Site Footer >> Add a Code Block >> paste this code

<a href="#top" class="t-top"><span class="arrow"></span>Top</a>

Next, go to Design > Custom CSS > Add this code

/* Back to Top */
.t-top {
    font-weight: 300;
    letter-spacing: 3px;
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 4px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    z-index: 999;
    background-color: transparent;
    color: #000;
}
.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;
}
.t-top .arrow {display:inline;}

On 7/21/2021 at 9:46 PM, tuanphan said:

With your plan, edit Site Footer >> Add a Code Block >> paste this code

<a href="#top" class="t-top"><span class="arrow"></span>Top</a>

Next, go to Design > Custom CSS > Add this code

/* Back to Top */
.t-top {
    font-weight: 300;
    letter-spacing: 3px;
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 4px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    z-index: 999;
    background-color: transparent;
    color: #000;
}
.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;
}
.t-top .arrow {display:inline;}

 

Hi Tuan,

Unfortunately when I go to add code to the footer, it says it is a premium feature and the box is greyed out.

When I add the custom CSS without adding the footer code injection, the scroll to top function does not work.

Is there a work around without needing the footer code injection?

Thanks!

On 8/7/2021 at 4:13 AM, MissChi said:

Hi Tuan,

Unfortunately when I go to add code to the footer, it says it is a premium feature and the box is greyed out.

When I add the custom CSS without adding the footer code injection, the scroll to top function does not work.

Is there a work around without needing the footer code injection?

Thanks!

 

Hi, Edit Site Footer, not Footer Code Injection

Footer is bottom of your site.

Hi Tuan,

Thanks for your quick reply! I am currently using the Wells template, I'm not sure if it has a site footer section? i see a site header section at the top but unfortunately no site footer section at the bottom.