Jump to content

end anchor link at section

Recommended Posts

Site URL: https://shanesimpkin.co.uk

Hey everyone,

I've been looking for the answer on the SQ forums but haven't found the right answer.

So I've set up my anchor links which work, however, how do I set the anchor to start at the top of a section rather than where the code block is?

For example, the anchor for about goes directly to where the respective code block is but I would like it to stop at the top of a section

Link to comment
  • Replies 4
  • Views 824
  • Created
  • Last Reply

The way url fragments work is to go to where they are on the page.

If the section had more content it may push the code block closer to the top of the section. You might throw some lorem ipsum text in there.

Another option would be to use Javascript to add ids to the page sections. That would require the business plan or above.

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
2 hours ago, creedon said:

The way url fragments work is to go to the where they are on the page.

If the section had more content it may push the code block closer to the top of the section. You might throw some lorem ipsum text in there.

Another option would be to use Javascript to add ids to the page sections. That would require the business plan or above.

 

How would I do the javascript option? 🙂

Link to comment

Please see Section Blank Attribute Id Add or Change.

No need to do the first step as you already have jQuery installed.

You'll want to remove your code block.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
9 hours ago, creedon said:

No need to do this step as you already have jQuery installed. Add the following to Settings > Advanced > Code Injection > HEADER.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Page Settings > Advanced > Page Header Code Injection for each page where you want url fragments link to the top of a section.


<script>

  $( ( ) => {
  
    /*
    
      begin add id attributes to sections
      
      SS Version : 7.1
      
      Note       : excludes header and footer sections
      
      */
      
      /* the ids are added by position so for each section an entry must be added
         to sectionIds, if you don't want to add an id to a particular section,
         leave the id empty */
        
      const sectionIds = [
      
        '',
        
        'about',
        
        'contact',
        
        ]
        
      // do not change anything below, there be the borg here
      
      $( '#sections section' ).each ( function ( i ) {
      
        const sectionId = sectionIds [ i ];
        
        if ( ! sectionId ) return true;
        
        $( this ).attr ( 'id', sectionId );
        
        } );
        
      // end add id attributes to sections
      
    } );
    
  </script>

This is for v7.1.

You'll want to remove your code block.

Let us know how it goes.

Ahh this worked!! thank you so much!

Link to comment

Archived

This topic is now archived and is closed to further replies.


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