Floating Back to Top Button

Site URL: http://www.thenajinproject.squarespace.com

Hi,

I'm needing help adding these behaviours to the "back to top" button on my site:

1. For it's background to be a white circle
2. For it to only appear after the user has scrolled down

I would also be so grateful if you can help me understand why the code block that sits in my footer for this button is so large in height on mobile. And help me reduce it so that the footer on mobile isn't huge.

Site password: Fatu

19 minutes ago, jaydiprewa said:

Simply paste the code in Setting > Advanced > Header

 

<div id="scroll-here"></div>
<a id="back-to-top" href="#scroll-here">
  <img src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' aria-labelledby='title' aria-describedby='desc' role='img' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EAngle Up%3C/title%3E%3Cdesc%3EA line styled icon from Orion Icon Library.%3C/desc%3E%3Cpath data-name='layer1' fill='none' stroke='%23202020' stroke-miterlimit='10' stroke-width='2' d='M20 40l11.994-14L44 40' stroke-linejoin='round' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E" alt="Angle Up" />
</a>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
  $(function(){
    //Function To Add Class
    function showBackToTop(){
      $('#back-to-top').addClass('show-btt');
    }

    //Function To Add Class
    function hideBackToTop(){
      $('#back-to-top').removeClass('show-btt');
    }

    //Check Scroll and Add Class
    function checkScrollPos(){
      if ($(this).scrollTop() >= 700) { //if scroll position is lower than 700px from the top of the screen
        showBackToTop();
      } else {
        hideBackToTop()
      }
    }
    // tell the browser to run the "checkScrollPos()" function just above when the user scrolls
    $(window).on('scroll', function(){ 
      checkScrollPos();
    });
    //Check the scroll position once when the page loads
    checkScrollPos();
  })
</script>
<style>
  html {
  scroll-behavior:smooth
}
#back-to-top{
  height:50px;
  width:50px;
  position:fixed;
  right:0;
  z-index:99;

  border-radius:50%;
  box-shadow: 0px 0px 5px #ccc;
  margin:17px;
  background:white;

  /Position Out of View/
  bottom:-150px;
  opacity:0;
  transition: all .5s ease;
}
#back-to-top.show-btt{
  /Position In View/
  bottom:0;
  opacity:1;
  transition: all .5s ease;
}
</style>

for you have to hide your current code

<style>
.t-top { display:none !important; }
</style>

Add this also in same header block

Unreal! Thank you

Could you help me have it in the bottom right of the page, instead of the top right?

replace this code please with existing

#back-to-top.show-btt {
    bottom: 0;
    opacity: 1;
    transition: all .5s ease;
}

#back-to-top {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 0;
    z-index: 99;
    border-radius: 50%;
    box-shadow: 0px 0px 5px #ccc;
    margin: 17px;
    background: white;
    bottom: -150px;
    opacity: 0;
    transition: all .5s ease;
}

14 hours ago, jaydiprewa said:

replace this code please with existing

#back-to-top.show-btt {
    bottom: 0;
    opacity: 1;
    transition: all .5s ease;
}

#back-to-top {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 0;
    z-index: 99;
    border-radius: 50%;
    box-shadow: 0px 0px 5px #ccc;
    margin: 17px;
    background: white;
    bottom: -150px;
    opacity: 0;
    transition: all .5s ease;
}

 

You are so good! Can't thank you enough 🙂

Welcome - Anytime if any issue or update needed please let me know. you can mark it solved and rate my solution. 

Have a great day. 

How would I make this apply to each page on the website instead of just one, please? Thanks!

@jaydiprewamight you know how to get this to apply on all pages versus just one? thanks so much!

On 11/29/2022 at 2:42 AM, SandraC said:

@jaydiprewamight you know how to get this to apply on all pages versus just one? thanks so much!

Where did you add the code? Page Header, Code Block or Site wide Code Injection? If add to Site wide Code Injection, it should run on all pages

This is great - love the style of it. My only issue is that on mobile it blocks my menu hamburger from being clickable (and also flashes up massive when the page is loading).

This is just what I was looking for. Only issue is that I can't get it to work. It shows up as expected, just doesn't do anything when clicked. Any suggestions?

On 1/25/2023 at 9:35 PM, bjt said:

This is great - love the style of it. My only issue is that on mobile it blocks my menu hamburger from being clickable (and also flashes up massive when the page is loading).

On 1/26/2023 at 10:28 PM, r1ch4rd said:

This is just what I was looking for. Only issue is that I can't get it to work. It shows up as expected, just doesn't do anything when clicked. Any suggestions?

If you share link to your site, we can check easier

Http://benjackthomas.com - I've taken off as it was blocking the menu hamburger 

Bump

On 1/30/2023 at 3:47 AM, bjt said:

Http://benjackthomas.com - I've taken off as it was blocking the menu hamburger 

You can add this to Settings > Advanced > Code Injection > Footer

<!-- Scroll To Top Button HTML -->
<button id="wm-back-to-top">
  <div class="btt-background"></div>
  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Angle Up</title>
      <path data-name="layer1" fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" d="M4 42 l28 -26 L60 42" stroke-linejoin="round" stroke-linecap="round"></path>
    </svg>
  </div>
  <p class="text">To Top</p>
</button>

<!-- Scroll To Top Button Javascript -->
<script>
(function() {
  let throttlePause;

  document.addEventListener('click', function(e) {
    if (!e.target.closest('#wm-back-to-top')) return;
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  })

  document.addEventListener('DOMContentLoaded', function(){
    let btt = document.querySelector('#wm-back-to-top');
    if (btt?.closest('.sqs-block-content')){
      btt.closest('.sqs-block-content').style.display = 'inline';
    }
  });

  const throttle = (callback, time) => {
    if (throttlePause) return;

    throttlePause = true;
    setTimeout(() => {
      callback();
      throttlePause = false;
    }, time);
  };

  const checkPos = () => {
    let pos = document.documentElement.scrollTop,
        revealHeight = window.innerHeight * 0,
        bttButton = document.querySelector('#wm-back-to-top');
    if (pos >= revealHeight) {
      bttButton.classList.add('show');
    } else {
      bttButton.classList.remove('show');
    }
  }

  window.addEventListener("scroll", () => {
    throttle(checkPos, 150);
  });
  window.addEventListener('DOMContentLoaded', checkPos)
}());
</script>

Next, add this to Design > Custom CSS

/**
 * Back To Top Button Styles
 * From Will-Myers.com
 */
#wm-back-to-top {
  z-index:999;
  position:fixed;
  display:flex;
  bottom:0;
  right:0;
  min-width: 50px;
  min-height: 50px;
  flex-direction: column;
  gap: 8px;
  align-items:center;
  justify-content:center;
  box-sizing:content-box;
  margin: 8px;
  padding: 5px;
  cursor:pointer;
  opacity:0;
  overflow:hidden;
  transform: translateY(0px) scale(1);
  background:transparent;
  border-radius: 0px;
  border-width: 0px;
  border-color: #000000;
  border-style:solid;
  visibility:hidden;
  transition: opacity .3s ease,
    transform .3s ease,
    visibility 0s ease .3s;
  will-change:transform;
  backdrop-filter: blur(0px);

  &.show{
    transform: translateY(0px);
    opacity:1;
    visibility: visible;
    transition: opacity .3s ease,
      transform .3s ease,
      visibility 0s ease 0s;
  }
  .icon{
    position:relative;
    display:flex;
    justify-content:center;
    line-height:0;
    height:auto;
    width:auto;
  }
  .text{
    position:relative;
    margin:0;
    font-size: 0.8rem;
    font-weight: 500;
    color: #000000;
    text-transform: uppercase;
  }
  svg{
    width: 20px;
    height: 20px;
  }
  path{
    stroke-width: 5px;
    stroke: #000000;
  }
  .btt-background {
    box-sizing:border-box;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color: #f5f5f5;
    opacity: 1;
    transition: opacity .3s ease;
  }

  &:hover{
    transform:translateY(-3px);
    opacity: .85;
  }
  &:active{
    transform: translateY(-3px) scale(.95);
  }
}

@tuanphan Thank you! This just helped me soooooo much!

On 5/18/2023 at 5:04 AM, jake98 said:

If i wanted to use this code but with a custom arrow up instead - how would i do this please? 

Just add the code, then share site url, we will give the code to replace current icon with your desired image

On 5/21/2023 at 4:45 AM, jake98 said:

hi there all done

What is your site url?

On 5/23/2023 at 7:26 AM, jake98 said:

readalmostfamous.com

Add to Design > Custom CSS

.btt-background {
    background-color: transparent !important;
    background-image: url(https://content.invisioncic.com/p289038/monthly_2023_05/image.png.f6a8e76121157176bc3c1ffa62625963.png) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
button#wm-back-to-top>*:not(:first-child) {
    visibility: hidden;
}

17 minutes ago, jake98 said:

thank you so much for this @tuanphan - is it possible to make it a titchy bit smaller and for the top of the arrow not to be cut off?

 

thank you so so much for your help ❤️ 

Add to Design > Custom CSS

#wm-back-to-top{
min-height: 65px;
}

12 hours ago, jake98 said:

thank you @karan is it possible to make the arrow slightly smaller?

 

your fix helped it being cut off! - so thank you

Add to Design > Custom CSS

#wm-back-to-top .btt-background {
    height: 89%;
    width: 85%;
}

Let me know if its solves size issue.

@karan THIS WORKED THANKS SO MUCH!

last request (promise)

is there code i can use so that i can have it one size on web and another on mobile? 

thanks 

On 5/31/2023 at 10:22 PM, jake98 said:

@karan THIS WORKED THANKS SO MUCH!

last request (promise)

is there code i can use so that i can have it one size on web and another on mobile? 

thanks 

Okay remove previous code I have sent for arrow size. Copy new code from below and add it.

 

#wm-back-to-top .btt-background {
    height: 60%;
    width: 60%;
}

@media (max-width:767px){
	height: 100%;
    width: 100%;
}

@tuanphan and @jaydiprewa, do you have solutions for a floating "back to top" arrow for personal accounts? I do not have a business account. I have followed the above code but I think it is for business accounts only. Thank you for any help.

On 12/5/2023 at 5:37 AM, Ramen207 said:

@tuanphan , do you have solutions for a floating "back to top" arrow for personal accounts? I do not have a business account. I have followed the above code but I think it is for business accounts only. Thank you for any help.

With Personal Plan

First, edit your site Footer > Add a Code Block > paste this code

<div id="scroll-here"></div>
<a id="back-to-top" href="#scroll-here">
  <img src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' aria-labelledby='title' aria-describedby='desc' role='img' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EAngle Up%3C/title%3E%3Cdesc%3EA line styled icon from Orion Icon Library.%3C/desc%3E%3Cpath data-name='layer1' fill='none' stroke='%23202020' stroke-miterlimit='10' stroke-width='2' d='M20 40l11.994-14L44 40' stroke-linejoin='round' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E" alt="Angle Up" />
</a>
<style>
  html {
  scroll-behavior:smooth;
}
#back-to-top{
  height:50px;
  width:50px;
  position:fixed;
  right:0;
  z-index:99;

  border-radius:50%;
  box-shadow: 0px 0px 5px #ccc;
  margin:17px;
  background:white;
  bottom:-150px;
  opacity:0;
  transition: all .5s ease;
}
#back-to-top.show-btt{
  bottom:0;
  opacity:1;
  transition: all .5s ease;
}
</style>

Next, add a Markdown Block under Code Block > Paste this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(function(){
    function showBackToTop(){
      $('#back-to-top').addClass('show-btt');
    }
    function hideBackToTop(){
      $('#back-to-top').removeClass('show-btt');
    }
    function checkScrollPos(){
      if ($(this).scrollTop() >= 700) {
        showBackToTop();
      } else {
        hideBackToTop()
      }
    }
    $(window).on('scroll', function(){ 
      checkScrollPos();
    });
    checkScrollPos();
  })
</script>