Anchor links not working in Kleo

[MichaelP]

Anchor links (links that point to a position in the page) don’t work when you directly load the page with the corresponding URL. Here is an example:

https://4sysops.com/wiki/free-ebooks-for-sysadmins-and-devops/#powershell

It seems that the browser tries to scroll down to the anchor, but Javascript code scrolls the page back to the top. If you click the corresponding link at the menu (Contents of the article) inside the page (PowerShell in the example) you see that the anchor works (see attachment). But if you directly open the above URL the link doesn’t work

I tested without plugins (aside from plugins required by Kleo) and a blank Kleo Child theme. The only active plugin was Better Anchor Links.

Note that the anchor links work with the Twenty Fifteen theme and they previously also worked with Kleo. I don’t know which Kleo update introduced this bug.

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Hi

The issue there its because those headings doesn’t have any div ID to can go directly to them.

From example if you access this link that links to the footer section will scroll as it should.
https://4sysops.com/wiki/free-ebooks-for-sysadmins-and-devops/#footer

You will have to add id to the respective divs

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[MichaelP]

Thanks for the reply. You are right, it works with id attributes, although the id doesn’t have to be added to a div. It also works with with a tags.

However, this is a bug in Kleo. The problem is not an HTML issue. Our HTML is okay. We just use name attributes instead of id attributes for the anchor. The corresponding a tag is right above the h2 tag.

If I disable JavaScript in the browser, the links work. This JavaScript code that breaks the links must come from Kleo.

We have used name attributes many times in the last 12 years and Kleo now breaks all those links. I am sure we are not only ones who have this problem now with Kleo.

Can you fix this bug in Kleo?

[Radu]

Hi,

From what i know the scroll works only on ID’s , right now i’ve disabled js and i’ve accessed this link but no scroll : https://4sysops.com/wiki/free-ebooks-for-sysadmins-and-devops/#powershell

So to can solve the issue you will need to add ID to those A tags

Give a try, let me know

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[MichaelP]

You have to disable JavasScript in the browser, save the settings and then open a new tab where you paste the URL. It does not work if you just reload the page. I just tried it again with Chrome on a Mac and the anchors work when I disable JavaScript.

Besides, the anchors work in any other modern theme. Try the Twenty Fifteen theme that comes with WordPress and the Better Anchor Links plugin. You can find more about the name attribute and fragment identifiers here: https://stackoverflow.com/questions/484719/html-anchors-with-name-or-id

I cannot start replacing legitimate name attributes on a site with more than 10,000 pages because of a bug in a theme.

Can you fix this bug in Kleo?

[Radu]

Hi,

Just i’ve copied all of you page content to my local install and switched to default wp theme and the scroll of course that not works at page load : https://4sysops.com/wiki/free-ebooks-for-sysadmins-and-devops/#powershell because there is no id specified.

In the stack overflow link that you had provided there it’s not mentioned the navigate scroll works at page load, it works on page after it’s already loaded.

Even on the html standards they are using ID’s not names.

But anyway was easy for us to make a solution for you to can work exacly like ID’s but with NAME’s

Just replace this file : wp-content/themes/kleo/assets/js/app.js
with this file content : https://pastebin.com/raw/BNPhEN7r

Then make sure to load the unminified file by activating development mode under wp-admin -> theme options -> miscellaneous -> Development mode -> ON

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[MichaelP]

Radu, the name attribute in the a tag was deprecated in HTML5, but all browsers still support it. It is really a very common HTML feature. I’ve used this attribute a thousand times and of course the browser will jump directly to a position if you link to it from an external site or open the URL directly.

Try this: https://www.w3.org/TR/html4/struct/links.html#h-12.3
The browser will jump directly to the anchor name. And this is the code they use: 12.3. As you see, no id needed.

Replacing a file in the theme is not really a solution because this will be overwritten with the next update.

The name attribute in anchors also worked before with Kleo and I am 100% certain because I used such links many times since we work with Kleo. The bug must have been introduced recently in Kleo and it is definitely a JavaScript bug because the links work just fine with disabled JavaScript in the browser.

Forward this to the theme developer. I am sure he or she will want to fix this bug.

[Radu]

Hi,

We will include that method to scroll also on name attr in our theme to can autoscroll on page load how the ID does, and will be included from now in all theme releases, so you are safe to overwrite the file.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[MichaelP]

Great! Thanks a lot!

By the way, replacing wp-content/themes/kleo/assets/js/app.js
with https://pastebin.com/raw/BNPhEN7r did not work.

[Radu]

Then make sure to load the unminified file by activating development mode under wp-admin -> theme options -> miscellaneous -> Development mode -> ON

Did you had done this ?

Make sure to empty all caches.

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[MichaelP]

Sorry, I forgot to enable development mode; it works if enabled. Hope it will work without development mode in the update.

Many thanks for your support!

[Radu]

Yes, after the update will work if the dev mode off

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts