Can I Add A Comments Section In Square Space Template

How to Add together a Back to Top Push button on Squarespace

Exercise you have a Squarespace website and are using a template that doesn't have a back to top button? Here's how you lot tin can add together a back to top button to whatever Squarespace template.

Here'southward what the push will look like, it'll appear in the lesser right.

Footstep i - The HTML

First, log into your Squarespace website and add the following code to SETTINGS → ADVANCED → Code INJECTION → FOOTER.

                          <                          script                          src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"                          >                          </                          script                          >                          <                          script                          src="https://cdnjs.cloudflare.com/ajax/libs/font-crawly/5.12.1/js/all.min.js"                          crossorigin="anonymous"                          >                          </                          script                          >                          <                          button                          onclick="topFunction()"                          id="myBtn"                          title="Go to meridian"                          >                          <                          i                          class="fas fa-pointer-upwards"                          >                          </                          i                          >                          </                          button                          >

This code will provide the actual push button for us to way. It won't exercise anything by itself just yet.

Step 2 - The JavaScript

We're now going to add in the JavaScript which gives our button the role we need (scrolling back to the top). Add the following code to SETTINGS → Avant-garde → CODE INJECTION → FOOTER. Add this code but below the code we added in pace 1. This code is ready to take 1 2d to scroll back to the meridian, if you want it faster or slower, modify the "k" in the concluding line of the code. It'south in milliseconds and then if you lot want 0.v seconds, utilize "500" and if you want two seconds, employ "2000".

                          <                          script                          >                          window.onscroll                          =                          function() {scrollFunction()};                          function                          scrollFunction() {                          if                          (document.trunk.scrollTop                          >                          20                          |                          |                          document.documentElement.scrollTop                          >                          twenty)       {                          certificate.getElementById("myBtn").manner.display                          =                          "block";       }                          else                          {                          document.getElementById("myBtn").fashion.display                          =                          "none";       }    }                          function                          topFunction() {                          $('html,body').animate({                          scrollTop:                          0                          },                          1000);    }                          </                          script                          >

Step 3 - The CSS

The following code is what gives style to our button. Add together the following code into the DESIGN → CUSTOM CSS section.

                          #myBtn                          {                          width:                          50px;                          height:                          50px;                          brandish:                          none;                          position:                          fixed;                          bottom:                          20px;                          right:                          30px;                          z-index:                          99;                          edge:                          none;                          outline:                          none;                          font-size:                          25px                          !important;                          color:                          white;                          cursor:                          pointer;                          padding:                          10px                          10px                          10px                          11px;                          border-radius:                          l%;                          box-shadow:                          1px                          1px                          5px                          #000;                              background-color:                          #a4a4a4; }                          #myBtn:hover                          {                          groundwork-color:                          #aeaeae; }

That should do it! You should be able to see the push in the bottom right. It appears after a visitor scrolls a footling bit down the website. If you lot accept whatsoever questions, feel costless to comment and I'll answer them equally soon as possible.

Source: The code from W3Schools was adjusted for this tutorial.

Vigasan Gunasegaran

Hey! I'k Vigasan and I honey the Net. I have a Bachelor of Scientific discipline in Computing Systems with a double specialization in Computer Science and Software Engineering. I've been creating websites and working with social media since 2014 and have created over 200 Squarespace websites so far.

https://www.adlyticmarketing.com/