Docs

[karaokelove]

Hi, I’m having an issue with one-page navigation (url: https://streamauthority.com/guides/open-broadcaster-software/). When I click a link to navigate to an area of the same page, it doesn’t just go there; instead, it scrolls to that location. This is a cool effect, but unfortunately it doesn’t play nice with Lazy Load, and I’d rather have a fast and efficient page than a cool transition. So is there a way to have my one-page-navigation links go straight to the linked id, rather than scrolling there?

I was actually able to achieve the desired effect accidentally due to a JS error when I had conflicting plug-ins, so I assume there’s got to be a way to manually do it. Thanks!

[Rue Nel]

Hello There,

Thanks for writing in! One checking the page, it doesn’t have one page navigation applied. The click to navigation links and all the contents is on the same page. This is the reason why the page just scrolls to the content block within the page. What sort of effect you want on the page? Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[karaokelove]

Sure, so if you go to my url at https://streamauthority.com/guides/open-broadcaster-software/ you’ll see I have a Table of Contents. I’d like the user to be able to click an item in the Table of Contents to navigate directly to that item. It currently works (using IDs), except that since it scrolls there, if I activate Lazy Load, the images load in such a way that it throws off the scrolling effect, causing it to stop before actually reaching its destination.

[Rad]

Hi there,

Sure, please add this code to Admin > Appearance > Customizer > Custom > Cusom > Global Javascript.

jQuery ( function($) {

$(document).ready ( function() {

setTimeout ( function(){

$('.no-scrolling, .no-scrolling a').off('click touchstart touchend');

}, 100 );

} );

} );

Then simply add no-scrolling to your link class name, or your element’s class input (eg. text class input)

This is required since your table links has no specific class.

Hope this helps.

[karaokelove]

That’s great, thanks!

[Rue Nel]

You are most welcome!

[karaokelove]

Is there a way to universally disable the scrolling effect so that I don’t have to edit every single element that uses it?

[Rad]

Hi there,

There is, but that will also disable all links that supposed to have the scrolling effect, like one page’s scrolling.

jQuery ( function($) {

$(document).ready ( function() {

setTimeout ( function(){

$('a').off('click touchstart touchend');

}, 100 );

} );

} );

Thanks!

[karaokelove]

That’s perfect, thanks! Now the only problem is that I’m using Uber Menu, and the scroll/link isn’t taking it into account, leading to the Uber Menu covering up part of the page that is linked to (i.e. it’s scrolling/linking too far since it doesn’t take the Uber Menu into account). Is there a way to fix this?

[Rue Nel]

Hello There,

Thanks for the updates! Regarding the other issue, please go to your customizer, Appearance > Customize > Header > Navbar and set the “Navbar Top Height (px)” to at least 50 pixels. Right now it is just at 30 pixels this is why a few pixels is covering your heading when you load the section on the page.

Hope this make sense. Please let us know how it goes.

[karaokelove]

Hmm, that’s not fixing it. I’ve now disabled Ubermenu but the problem is still happening. It was inconsistent before, then it was 100% with Ubermenu, and now it’s 100% without Ubermenu.

[Joao]

Hi There,

Are you still facing this issue? If yes, on which device? I have tested and it is scrolling perfectly above the purple boxes.

Let us know more details,

Thanks

Joao

[karaokelove]

I’m still having the issue on dekstop. https://streamauthority.com/guides/open-broadcaster-software/

It’s scrolling down so that the menu is lining up with the bottom of the purple headers, rather than the top. I thought maybe it was caused by the WordPress Admin Bar, but I’ve tested it without the bar and it still happens.

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[karaokelove]

This reply has been marked as private.

[Author]

Posts