Category: SquareSpace

Categories
Code Snippets Javascript JQuery SquareSpace Wordpress

SquareSpace | WordPress | CMS Friendly | Scroll to Top Button

In this tutorial, we’ll be adding a Scroll to Top button to the website. These steps will work for SquareSpace, WordPress and any other CMS.

See it in action here: https://billmuirhead.com

First, let’s add the button to the body of the page.

Get the identifier on your header element, it may be on the <nav> element on something similar which lives on the top of each page.

In this case we’re using #site-header where we have a div with id = site-header.

Be sure to add the code below to the body element in such a way that it will show on each page such as the header or footer.

<a class="to-the-top" href="#site-header">
    <span class="to-the-top-long">
    To the top <span class="arrow" aria-hidden="true">ā†‘</span>
    </span><!-- .to-the-top-long -->
    <span class="to-the-top-short">
        Up <span class="arrow" aria-hidden="true">ā†‘</span>
    </span><!-- .to-the-top-short -->
</a>

Next, let’s add the javascript/ Jquery to add the scroll to top functionality to the button. It will the button when we’re already at the top!

First, add the following Jquery script tag to the Footer section to make sure Jquery is enabled:

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

Following that, add the Scroll to Top javascript code also to the Footer section immediately after the Jquery script above.

jQuery( document ).ready(function() {
    
            
    jQuery(window).bind('scroll', function() {
            
            wrap = jQuery('body');
            scrollTop = jQuery(window).scrollTop();
        
            distance = 50;
            console.log("slide height!");
                                     
            if (scrollTop > distance)	{
                wrap.addClass("fixed");
                jQuery( ".to-the-top" ).show();
            } else {
                wrap.removeClass("fixed");
                jQuery( ".to-the-top" ).hide();
            }		
        
    });	
    
    
    jQuery( ".to-the-top" ).click(function() {
        
        document.body.scrollTop = 0; // For Safari
  		document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
        
    });
    
});

Video explanation for implementing on SquareSpace :

Categories
Code Snippets CSS Javascript JQuery SquareSpace

SquareSpace | How to Add an (FAQ) Accordian

HTML====
<button class="accordian">
  Section 1
</button>
<div class="panel">
  <p>
    Lorem ipsum....
  </p>  
</div>
<button class="accordian">
  Section 2
</button>
<div class="panel">
  <p>
    Lorem ipsum....
  </p>  
</div>
<button class="accordian">
  Section 3
</button>
<div class="panel">
  <p>
    Lorem ipsum....
  </p>  
</div>

CSS====
<style>
  
  .accordian {
           background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        transition: 0.4s;
  }
  
  .panel {
       padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
  }
  
  .active, .accordian:hover {
           background-color: #ccc; 
  }
  
  .accordian:after {
           content: '\02795';
        font-size: 13px;
        color: #777;
        float: right;
        margin-left: 5px;
  }
  
  .accordian.active:after {
           content: '\02796'; 
  }

</style>

Javascript====
<script>
    var acc = document.getElementsByClassName("accordian");
      var i;
  
      for (i = 0; i < acc.length; i++) {
         acc[i].addEventListener("click", function() {
              this.classList.toggle("active");
              var panel = this.nextElementSibling;
          
              if(panel.style.display === "block") {
                 panel.style.display = "none"; 
            }
              else {
                 panel.style.display = "block"; 
            }
        });
    }

</script>