Jump to content

Sticky button for specific pages?

Recommended Posts

  • Replies 1
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted

First, adding this code to Website > Website Tools (under Not Linked) > 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);
  }
}

Next, add this code to Website Tools > 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');
    let body = document.body;
    body.append(btt);
    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>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.