Jump to content

Floating Back to Top Button

Go to solution Solved by jaydiprewa,

Recommended Posts

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

Link to comment
  • Solution

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

Edited by jaydiprewa
revise the code
Link to comment
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?

Link to comment

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;
}

 

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

Link to comment
  • 4 months later...
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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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);
  }
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.