end anchor link at section

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

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.

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? 🙂

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!