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

Adding a sticky navigation to the Wexely template


Recommended Posts

  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

I can help with the second  request, I used these steps to add a site wide back to top arrow or button. Both examples I have put the button in the lower right hand corner, it fades in after you scroll for a bit. 

https://www.adlyticmarketing.com/blog/squarespace-how-to-add-a-back-to-top-button/

you can see a back to top arrow on this site. 

my random views derrick Lee parker 

 

For one page you use this. Post it in the advance header code injection for each page you want the button,  just about as easy as the top method, if not easier. You can see it on this site

https://atlanticcoastwater.com/

 

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

 

If you want a simple link that works on all pages paste this in a code block on the footer of your site. Both options work with a personal plan. Paste this inside  

 href="#" class="btt"> Back to Top 

I tried both on a Wexley site that I have and they worked.  I modified the code to work in a markdown box. Just add the box and the code to the header of any page you want to use the floating back to top button.

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


<a href="#top" id="back-to-top" class="back-to-top" style="display: inline;">Top</a>


<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 comment
19 hours ago, derricksrandomviews said:

href="#" class="btt"> Back to Top

Hi Derrick! Thanks again for your reply. Bare with me as I'm not that fluent with all of this and I'm a bit lost with your second solution.

Do I enter this code in the footer by using the "code <->" option under "more"?

 href="#" class="btt"> Back to Top 
Link to comment

Also, am I adding this whole code to the header and navigation to stick? I really appreciate your time.

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


<a href="#top" id="back-to-top" class="back-to-top" style="display: inline;">Top</a>


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

Link to comment
  • 9 months later...

Hello! Would anyone be able to help me remove a "back to top" button from mobile view? Or edit it so that it works on mobile? The website is www.neemaproject.org and the code injected on the main home page is this: 

<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: 50%;
  }

  a.back-to-top {
    font-weight: 1000;
    letter-spacing: 2px;
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 16px;
  }

  .back-to-top:hover, .back-to-top:focus, .back-to-top:visited {
    color: #FFFFFF;
  }

  .back-to-top.show {
    opacity: 1;
  }
</style>

<!-- Adds the back to top link to your website -->
<a href="#" 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;

  window.addEventListener('scroll', function(e) {
      if ( window.pageYOffset > amountScrolled ) {
          link.classList.add('show');
      } else {
          link.className = 'back-to-top';
      }
  });

<!-- Scrolls to Top -->
  link.addEventListener('click', function(e) {
      e.preventDefault();

      var distance = 0 - window.pageYOffset;
      var increments = distance/(500/16);
      function animateScroll() {
          window.scrollBy(0, increments);
          if (window.pageYOffset <= document.body.offsetTop) {
              clearInterval(runAnimation);
          }
      };
      // Loop the animation function
      var runAnimation = setInterval(animateScroll, 16);
  });
</script>

Link to comment
On 1/25/2021 at 8:05 PM, Emily_NeemaProject said:

Hello! Would anyone be able to help me remove a "back to top" button from mobile view? Or edit it so that it works on mobile? The website is www.neemaproject.org and the code injected on the main home page is this: 

<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: 50%;
  }

  a.back-to-top {
    font-weight: 1000;
    letter-spacing: 2px;
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 16px;
  }

  .back-to-top:hover, .back-to-top:focus, .back-to-top:visited {
    color: #FFFFFF;
  }

  .back-to-top.show {
    opacity: 1;
  }
</style>

<!-- Adds the back to top link to your website -->
<a href="#" 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;

  window.addEventListener('scroll', function(e) {
      if ( window.pageYOffset > amountScrolled ) {
          link.classList.add('show');
      } else {
          link.className = 'back-to-top';
      }
  });

<!-- Scrolls to Top -->
  link.addEventListener('click', function(e) {
      e.preventDefault();

      var distance = 0 - window.pageYOffset;
      var increments = distance/(500/16);
      function animateScroll() {
          window.scrollBy(0, increments);
          if (window.pageYOffset <= document.body.offsetTop) {
              clearInterval(runAnimation);
          }
      };
      // Loop the animation function
      var runAnimation = setInterval(animateScroll, 16);
  });
</script>

Add to Design > Custom CSS

/* remove back to top mobile */
@media screen and (max-width:767px) {
.back-to-top {
	display: none !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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...