Hook / functions.php Question

[Axlso]

Hello. I’m seeking some advice from some more experienced WP / Cwicly users.

I’ve come across a minor issue regarding my site functionality today, and some of the solutions I have found are leading me to places unknown (to me!)

Simply put - my navbar has two separate links for ‘About’ and ‘Contact’ and I have a combined ‘about-contact’ page on my site. The upper section of the page (#about) contains About information and the lower section of the page (#contact) contains contact information.

The issue I am having is when the user navigates to exampleURL/about-contact/#contact via the navigation link - the about-contact page loads at the top and then scrolls down to the #contact section via the #about section.

Does anybody have any suggestions on the most efficient way for me to have the page load at the #contact section when the Contact link is selected?

I am new to Hooks, and the solutions I have found include me adding a script to functions.php (also new to me) - I have been advised to create a child theme first (not sure if this is necessary).

If anybody has any thoughts or suggestions it would be most appreciated!
Many thanks in advance

[StrangeTech]

Hi @Axlso,

If I understand what you are wanting and you are amenable to a quick solution via a plugin, this may help:

Page scroll to id

Alternatively, there are snippets that can be added using the code snippets plugin, if you don’t want to migrate to a child theme for any reason.

One important thing to remember is, make sure that your links are root relative, so that they work from all pages.

So rather than “#contact”, that link would need to be “/about-contact/#contact” for example.

[Axlso]

Hi @StrangeTech,

Thanks very much for the response! I just checked out the plugin and I’m not sure it does exactly what I’m looking for, but it’s definitely worth a deeper look - thank you very much for sending!

To clarify, when I navigate to ‘Contact’ (#contact) from another page via the navbar link, the browser loads at the top of the ‘about-contact’ page, and then, once loaded, smoothly scrolls down to the #contact section. The transition flows nicely - but I would rather the page loaded directly on the #contact section further down the page and there was no scroll at all. Essentially, the page would load nearer the bottom of the page rather than at the top.

This plugin seems to have a lot of functionality, so it might well do the job! Thank you again for sending and thanks very much also for the root relative link advice!

[StrangeTech]

@Axlso

but I would rather the page loaded directly on the #contact section further down the page and there was no scroll at all. Essentially, the page would load nearer the bottom of the page rather than at the top.

That is much clearer - I understand what you are wanting to achieve now. The one consideration about directly “jumping” to the anchor for the specific part of the page is that it is dependent on the contents of the page being loaded.

An advantage of starting at the top of the page and scrolling to an anchor is that in most cases it gives sufficient time for the page to load so the user should be able to view it more completely/reliably. If this is not a concern (i.e. your page loads very fast or you are fine with some incremental loading), then I recognise it may be preferable to jump directly to it as you describe.

Also, you may find these threads interesting:

Each scrolling action stored into browsing history

Hi! I am currently replicating a one-page website with Cwicly, which I have previously built with Bricks. I noticed that the smooth scrolling by Cwicly would make every click store in the browser history, which is not good. That said, I will return to the previous click when I click from the browser history(or click back to the previous arrow on the browser). The clicks for the one-page website should not store the click in the browser history as it’s only scrolling with the same page.

Scroll to section

From old feedback: Scroll to section | Cwicly An option to scroll to a specific section (ID) after clicking a link wrapper. This also could be extended to navigate to a different page and then scroll to that specific section. Inspiration: Jump.js Suggestion: Attached images [image]

[Axlso]

Yes, I see what you mean here. The scroll is very smooth with the placeholders I have and I think a gentle transition down from the upper section might even help orient the user when they arrive on the page.

I’ll review the other threads and maybe wait to see how the page loads when more content has been implemented.

Thanks very much for your help and thought’s on this @StrangeTech - really appreciate the suggestions!