Jump to content

Adding Anchor Links in 7.1

Recommended Posts

Hi everyone,

I am used to creating anchor links in earlier versions of Squarespace. Now I need to link from a header button down the page to a section. HOWEVER that section is a Simple List in which you can only Edit Content via the side panel.

I can find no where to put the anchor link code without it being visible and no way to add it just above the title. If I add a new section above it for the code there is this weird visual gap in the website design. Can someone help me solve this?

Screenshot 2022-10-21 at 12.22.18.png

Link to comment

This is a problem that crops up regularly. I would suggest that you could hide the List Section Title, and replace that with a bottom-aligned narrow section with a text block to replace the title, and you can then add a code block with your anchor ID (or add the title in the code block depending on your preference.) This is a work around, but it will work, and shouldn't affect the look. Hope that helps!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
23 minutes ago, aliciainspired said:

Hi Ziggy, thanks for your suggestion, although I am a bit confused about what you mean? How do I replace the title with a text block in this list?

The only way I know how to do it is to Add a Section above it, add text to that but then again there is a super weird gap in the website...

Are you using Fluid Engine in 7.1? I have anchor links on my site and ran into the same problem. If you're using FE then you can add a section above it, shrink it down and add the code and it leaves a minimal gap.

Sayre

Design: (Recently rolled into the Italian Journey under Services)

Author Coordinates: https://bio.site/sayreambrosio

Italian Journey: https://bio.site/ambrosiosjrnyhm

Link to comment
On 10/23/2022 at 7:29 AM, aliciainspired said:

The only way I know how to do it is to Add a Section above it, add text to that but then again there is a super weird gap in the website...

Yes, this is what I was suggesting. Generally it's helpful to share your website URL so that you can get the most relevant advise, knowing a bit more about your setup and design, including Squarespace version, really helps. If you're on Fluid Engine, you can very easily make the grid span top to bottom with no extra space, If you're on classic engine, I can give you code to reduce the padding.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I just solved for a member. We tried script code to add id to section.

Here is code for reference

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // about
$('[data-section-id="6347865dc6e0f3031847aaa3"]').attr('id','about');
  // collections
  $('[data-section-id="6347a295963cec6e06646a21"]').attr('id','collections');
  // faq
  $('[data-section-id="63576f792a2a3d7110ae0494"]').attr('id','faq');
  // contact
  $('[data-section-id="6347865dc6e0f3031847aaa9"]').attr('id','contact');
});
</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!)

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

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.