Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

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


NCB
Go to solution Solved by rhyann,

Question

Hi all. I wanna create a back to top button at the end of my home page which is an index made of 4 pages. I wanna add the button to the very bottom of course and I want it to take the viewer to the very top (again, of course).

I asked for help from customercare but apparently since it requires some coding they cannot help with it much other than sending a sheet that is clear as mud and that sounds like brain surgery to me (yes, I am clueless about how to code).

Can please someone help me with that by explaining it in plain everyday English? Thanks!

Edited by rhyann
Link to post
  • Answers 40
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

place this in settings advanced Header code injection <span id="top"></span>: Put this code in the settings/advanced/ page header code injection of every page that has a nav link

Hi all. I wanna create a back to top button at the end of my home page which is an index made of 4 pages. I wanna add the button to the very bottom of course and I want it to take the viewer to the ve

No problem, just so you know css code works for both Squarespace and Wordpress but the methods to use it are very different. 

Posted Images

Recommended Posts

  • 3

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.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to post
  • 0

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.

Link to post
  • 0

@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!

Link to post
  • 0

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.

Edited by alxfyv
edit code

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to post
  • 0

@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?

Link to post
  • 0
Posted (edited)

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. I tried adding this to my header file, I installed a code plugin and it all shows as text.

can you help me ?

thank you in advance. 

 

 

 

Edited by davil2008
Link to post
  • 2
Posted (edited)

place this in settings advanced Header code injection

<span id="top"></span>:

Put this code in the settings/advanced/ page header code injection of every page that has a nav link that  you want the back to top button to show up on. If you are using an index page just add it to that page, that is usually all you need to do. If you want the button to be round just adjust the border radius in the  code to a higher number to round off the corners until you can make it a circle if you wish. 

<!-- Styles your button (this is a black square with white text -->
<style>
.back-to-top {
    background-color: #000000;
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    z-index: 999;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 0%;
}
  
  a.back-to-top {
    font-weight: 1000;
    letter-spacing: 2px;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 14px;
}
  
  .back-to-top.show {
       opacity: 1;
  }
</style>

<!-- Adds the back to top link to your website -->
<a href="#top" id="back-to-top" class="back-to-top" style="display: inline;">Top</a>

<!-- Fades in the button when you scroll down -->
<script>
  var link = document.getElementById("back-to-top");
  var amountScrolled = 250;

function addClass(el, className) {

    if (el.classList) {
        el.classList.add(className);
    } else {
        el.className += ' ' + className;
    }

}

function removeClass(el, className) {
    if (el.classList)
      el.classList.remove(className);
    else
      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');    
}
  
window.addEventListener('scroll', function(e) {
     if ( window.scrollY > amountScrolled ) {
         addClass(link, 'show');
     } else {
         removeClass(link, 'show');
     }
 });
</script>

 

 

Edited by derricksrandomviews
Link to post
  • 0
Posted (edited)

Thank you for your quick reply.

I don't have a settings / advanced section.

something weird : I can delete the HTML widget on header and the button still works.

also is there a way to animate button to smoothly scroll to top ?

one tiny thing : the back to top button brings you to just a tiny bit before the top ( before the header menu and social icons.

I tried all your coding and it also showed as text.

thanks again for your reply

Edited by davil2008
Link to post
  • 0

both 7.0 and 7.1 have main setup settings advanced, it is at the bottom of the panel,  from there you  use code injection. The code does make the buttonscroll smoothly to the top, you can see it in action here: https://atlanticcoastwater.com/ 

 

It cannot show as text unless you are posting it on the page not in page settings. Are you on a business plan? because if not you cannot use the code that I have posted. 

 

 

Link to post
  • 0
Posted (edited)

I am confused.

version 7.0 and 7.1 of what have the settings advanced ?

and business plan of what ?

my intentions are a link to top at the footer menu and not a floating button.

Edited by davil2008
Link to post
  • 0
Posted (edited)

7.0 and 7.1 are the platforms that Squarespace sites are built on. The York template that the site url you posted, is built on 7.0. The directions I posted work for York . The site I posted that has the top button, which scrolls smoothly, is also built on 7.0. I also have scroll to top button on my personal site, happens to be an arrow instead of "top" but works the same. 

Edited by derricksrandomviews
Link to post
  • 0

@derricksrandomviews Hi!  would the piece of code work for a multi-language page and if so what would be the correct way to add it, I am working with a 7.1 version and have already a piece of code for multi-language menu? 

Thank you so much for your advice! 

Link to post
  • 0

@derricksrandomviews Thank you for your quick answer, I will use the arrow but where in your code I can see this? as it is now is a black square with white text, and should I add this to each page (both languages to make it work?)

Edited by Rte
Link to post
  • 0
On 7/13/2020 at 7:34 PM, Rte said:

@derricksrandomviews Thank you for your quick answer, I will use the arrow but where in your code I can see this? as it is now is a black square with white text, and should I add this to each page (both languages to make it work?)

Have you solved it yet?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
On 7/15/2020 at 12:04 PM, tuanphan said:

Have you solved it yet?

No, I haven't as I am not sure how to show an arrow on that piece of code.

Link to post
  • 0

you can use text for an arrow, ▲ for example.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0
On 6/6/2020 at 2:43 PM, derricksrandomviews said:

place this in settings advanced Header code injection

<span id="top"></span>:

Put this code in the settings/advanced/ page header code injection of every page that has a nav link that  you want the back to top button to show up on. If you are using an index page just add it to that page, that is usually all you need to do. If you want the button to be round just adjust the border radius in the  code to a higher number to round off the corners until you can make it a circle if you wish. 

<!-- Styles your button (this is a black square with white text -->
<style>
.back-to-top {
    background-color: #000000;
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    z-index: 999;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 0%;
}
  
  a.back-to-top {
    font-weight: 1000;
    letter-spacing: 2px;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 14px;
}
  
  .back-to-top.show {
       opacity: 1;
  }
</style>

<!-- Adds the back to top link to your website -->
<a href="#top" id="back-to-top" class="back-to-top" style="display: inline;">Top</a>

<!-- Fades in the button when you scroll down -->
<script>
  var link = document.getElementById("back-to-top");
  var amountScrolled = 250;

function addClass(el, className) {

    if (el.classList) {
        el.classList.add(className);
    } else {
        el.className += ' ' + className;
    }

}

function removeClass(el, className) {
    if (el.classList)
      el.classList.remove(className);
    else
      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');    
}
  
window.addEventListener('scroll', function(e) {
     if ( window.scrollY > amountScrolled ) {
         addClass(link, 'show');
     } else {
         removeClass(link, 'show');
     }
 });
</script>

 

 

This worked perfectly. Thank you so much for sharing it. I've been trying to figure this out all day.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...