Jump to content

Making a "back" button on the bottom of my Portfolio pages

Recommended Posts

Posted

I want to add a "back" button as pagination. I have pagination currently removed with a code in custom css, but is there a way to make the 2 buttons be one single button that lets people go back to the last page they were on?

 

So for example, If I was on on my Design Portfolio grid, and clicked into one of my Projects, there would be an automatic button on the bottom of that Project's page that links the viewer BACK to the Design Portfolio grid.

 

Thanks so much!

  • Replies 4
  • Views 2.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted (edited)

Add to Settings > Advanced > code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
 jQuery(document).ready(function($) {
   $('<section id="back-to" class="Index-page"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container sqs-block-button-container--center"><a href="/portfolio" class="sqs-block-button-element--small sqs-button-element--primary sqs-block-button-element">Back to Portfolio</a></div></div></section>').insertAfter('.item-pagination[data-collection-type^="portfolio"]');
 });
 </script>
<style>
section#back-to {
    margin-bottom: 20px;
}
</style>

Tested on my demo site. If it doesn't work on your site, please share link to portfolio page, we can check easier

image.thumb.png.2317dca1a30f7cfe0413f5ad16de14da.png

Edited by tuanphan
update latest jquery version + button missing a class name

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

  • 1 year later...
Posted

Hi, 

This code works great but can you get the back to portfolio button to be in line with the pagination please?

Thank you!!

  • 10 months later...

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.