Stick Menu And Scrolling Via "a" Tag

Hello,

Using Perth, I noticed a strange behavior using HTML’s “a” tag to create anchors in posts/pages.

In my home page everything works wonderfully: when the link is clicked, the smooth scrolling animation is displayed and the position where it stops is exactly below the menu.

Now I’m trying to add some anchors to a post and this is what happens:

  1. When a link is clicked, page cuts directly to the anchor with no nice animation;

  2. The menu is NOT taken into account, meaning the anchor location is positioned behind it. In effect, this one requires me to manually scroll the page so I can see what was lying behind the stick menu.

So, I wonder why the front page and the regular post have different implementations of both the menu and the “a” tag. How would I be able to make it work everywhere on my site?

Regards, DAVI

Dear Davi,

Could you please share the link to the page in queries, so I can troubleshot from what you are currently having.

Regards,
Kharis

I created a test page with the same content I will be posting later on. It is in portuguese, but nevertheless you will find the links in the table. You can see the different behavior if you go to the front page and click on any of the menu itens.

Front Page: http://5eonline.com/

Test Page: http://5eonline.com/en/test-page/

Thanks for the quick reply! DAVi

Quick update: I just noticed there is an animation when the scrolling is upwards. By the time you read this message the test page will have been updated with links to get back to the table (the one that sends you downwards in the page)

Hello there,

Please use this code:


<span id="Comandos-Gerais"></span>

instead of:


<a name="Comandos-Gerais"></a>

Let me know how it goes.

Regards,
Kharis

Same thing.

I updated the test page again with <span> for each anchor.

Regards, DAVI

Hello there,

Please edit your test page. Switch to text mode editor, then remove the following attribute from your table.


class="tablesorter {sortlist: [[1,0],[0,0]]} tablesorter-default"

Regards,
Kharis

So, I have a problem with the plugin that sorts the table for me…

Anyway, one problem down. The menu is not taken into account still, the links are being placed behind it as before.

I updated the test page again.

Regards, DAVI

To fix it, could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

#Comandos-Gerais,
#Gerenciando-O-Programa-Em-Debug,
#Monitorando-O-Codigo,
#Controlando-A-Execucao,
#Examinando-Variaveis-E-Memoria{
  display: block;
  padding-top: 60px;
  position: relative;
  margin-top: -60px;
}

Regards,
Kharis

Thanks, that solved the problem!

Just a final question now that I now why the animation isn’t working: how is it done by Perth? I’ll try to modify the plugin to be able to sort the table AND be able to maintain the a tag’s behavior…

Regards, DAVI

Hello there,

Normally, the scrolling animation works on any link which points to the anchor within the current page. It is handled in the theme’s main jQuery script. For some reason, it stops to work while the following attribute found.


class="tablesorter {sortlist: [[1,0],[0,0]]} tablesorter-default"

Regards,
Kharis

I’ll reach the plugin developer, thank you for your help!

Regards, DAVI

You’re welcome.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis