Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

end anchor link at section


Simpkin

Question

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
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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.

 

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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
  • 0
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

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...