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

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.

Hello!
I learned about the code here that shows the back to top button when scrolling down in and introduced it, but for some reason it doesn't work on the blog page.
Does anyone know how to make the back to top button appear when scrolling down on the blog page as well?

By the way, I'm using 7.1ver.

Three parts of code to make a back to top arrow work on all pages:

This goes into custom CSS:

/*  Change here the background color to follow your brand style!  */
@my-background-color:#F4F4F4;;

/*  Change here the hovering background color!  */
@hover-background-color: #F1948A;;

/* Change here the arrow color */
@arrow-color:  #00008B;

#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background-color: @my-background-color;
    color: @arrow-color;
    font-family: 'Roboto' !important;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
}
#back-to-top:hover {
    background: @hover-background-color;
}
#back-to-top.show {
    opacity: 1;

This goes into settings/advanced/code injection header:

<a href="#" id="back-to-top" title="Back to top">&uarr;</a>

This goes into settings advanced code injection footer:

<script>
$(function() {
if ($('#back-to-top').length) {
    var scrollTrigger = 100, // px
        backToTop = function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > scrollTrigger) {
                $('#back-to-top').addClass('show');
            } else {
                $('#back-to-top').removeClass('show');
            }
        };

    backToTop();
    $(window).on('scroll', function () {
        backToTop();
    });
    $('#back-to-top').on('click', function (e) {
        e.preventDefault();
        $('html,body').animate({
            scrollTop: 0
        }, 700);
    });
}
})

</script>

This isn't my code, though I have tweaked it a bit.

Haven't gotten around to testing it on squarespace, but it should work. This is by far the cleanest back to top I have seen.

https://codepen.io/r-w-p/pen/rNxPZpE

21 hours ago, derricksrandomviews said:

Three parts of code to make a back to top arrow work on all pages:

This goes into custom CSS:

/*  Change here the background color to follow your brand style!  */
@my-background-color:#F4F4F4;;

/*  Change here the hovering background color!  */
@hover-background-color: #F1948A;;

/* Change here the arrow color */
@arrow-color:  #00008B;

#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background-color: @my-background-color;
    color: @arrow-color;
    font-family: 'Roboto' !important;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
}
#back-to-top:hover {
    background: @hover-background-color;
}
#back-to-top.show {
    opacity: 1;

 

This goes into settings/advanced/code injection header:

<a href="#" id="back-to-top" title="Back to top">&uarr;</a>

 

This goes into settings advanced code injection footer:

<script>
$(function() {
if ($('#back-to-top').length) {
    var scrollTrigger = 100, // px
        backToTop = function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > scrollTrigger) {
                $('#back-to-top').addClass('show');
            } else {
                $('#back-to-top').removeClass('show');
            }
        };

    backToTop();
    $(window).on('scroll', function () {
        backToTop();
    });
    $('#back-to-top').on('click', function (e) {
        e.preventDefault();
        $('html,body').animate({
            scrollTop: 0
        }, 700);
    });
}
})

</script>

Thank you for this very useful information!

However, on my site, it works when I put the following code in the Advanced page settings, but again, I couldn't make the back to top icon appear on my blog page because it does't have Advanced settings:

<!-- Styles your button (this is a black square with white text -->
<style>
.back-to-top {
    background-color: #f5f2ee;
    color: #c8b397;
    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: 50%;
}
  
  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>

If you have any ideas for a back to top icon on the blog page, I'd appreciate it if you continue to let us know!

Webworks, is your site on a personal or business plan? The code I posted is not inserted on the blog page itself, its used in custom css under config/design advanced / custom css and the second and third parts go into config (home) settings/advanced/code injection.

That being said if on a personal plan only you can : 

Create a link that jumps back to the top of your page, you can add a Code Block to your blog page or site wide footer and paste this snippet inside:

<a href="#" class="btt"> Back to Top </a>

1 hour ago, derricksrandomviews said:

Webworks, is your site on a personal or business plan? The code I posted is not inserted on the blog page itself, its used in custom css under config/design advanced / custom css and the second and third parts go into config (home) settings/advanced/code injection.

That being said if on a personal plan only you can : 

Create a link that jumps back to the top of your page, you can add a Code Block to your blog page or site wide footer and paste this snippet inside:

 

<a href="#" class="btt"> Back to Top </a>

 That’s it. . And by the way you can change "Back to Top" to your own phrase.

Now to style it, you can target the .btt class on your CSS injection window and change it.

For example, you can change the font color, make it bold and align it to the center like this:

.btt { color: white; font-weight: bold; text-align: center; display: block; }

Hi derricksrandomviews,

Thank you for your kindly tips.
Yes, my site on a business plan.

I'm looking for something other than a way to jump up with an anchor link.
I just want the icon to appear when I scroll down and be able to return to the top in the middle of the article.

If on a business plan then the first code I posted will work, arrow appears while scrolling down and then you can click and it takes you back to the top. You don't post any of the code on the blog page itself. 

here is mine:

https://myrandomviews.com/storysummary

@webworks please post a link to your page.

2 hours ago, rwp said:

@webworks please post a link to your page.

Hi rwp,

Here's a link to my website's blog page:

https://prworks-jp.com/notes/2020cms-summary

That code is pretty rough.  The link is essentially hidden until you scroll down, but its still there. You can click it even when its not visible.

On your blog page, the css class .show isn't being added.

You also have two different back to top links on your home page.

8 minutes ago, rwp said:

That code is pretty rough.  The link is essentially hidden until you scroll down, but its still there. You can click it even when its not visible.

On your blog page, the css class .show isn't being added.

You also have two different back to top links on your home page.

Thank you for checking my site!

I know the I am cognizant of the condition you have pointed out.
The two links back to the top are because I've left in what derrricksrandomviews has presented here.  I just removed the second anchor link derrricksrandomviews told me about.

And I appreciate your clarification on the images!  I can click on the mouse in this position even though I certainly can't see it.

>On your blog page, the css class .show isn't being added.

How and where do I add that CSS?

@rwp @derricksrandomviews

Hello there,  

I interpreted @rwps meaning of

Quote

On your blog page, the css class .show isn't being added.

in my own way and rewrote the code in the Advanced > Code Injection > HEADER that @derricksrandomviews presented to me as follows, and I was able to get the icon to appear on all pages, including the blog page.

<a href="#" id="back-to-top" title="Back to top">&uarr;</a>
↓
<a href="#" id="back-to-top" title="Back to top" class="show">&uarr;</a>

However, this code is still not perfect, and the animation that makes the icon appear after scrolling doesn't work, and it shows up from the beginning. 😱

The javascript is supposed to be adding the .show class to the <a> tag. If you put it in manually, it will always be visible.

It looks like you changed the code, which will work, you just need to add the jquery script to the sitewide header injection.

Instructions are in my signature.

19 hours ago, rwp said:

It looks like you changed the code, which will work, you just need to add the jquery script to the sitewide header injection.

Instructions are in my signature.

Hello @rwp,

It's so awesome!
I don't know why, but I added the Javascript you gave me to HEADER in Settings<Advanced<Code Injection and it appears correctly.😆
Your knowledge is amazing!

Thank you so much for your big help. ☺️