- This topic has 21 replies, 2 voices, and was last updated 5 years, 11 months ago by Tom.
-
AuthorPosts
-
April 11, 2018 at 9:05 pm #547958TomLead DeveloperLead Developer
Smooth Scroll is still very new to the plugin, but we’ll get more documentation added ASAP.
For our built in system, you would need to:
1. Give your Elementor section an ID.
2. Link to the ID like you would in page scroll to ID. However, you need to give the link this class:
smooth-scroll
So if the link is in HTML, you would do this:
<a class="smooth-scroll" href="#my-elementor-id">Link to ID</a>
If it’s a menu item, you can give it the
smooth-scroll
class like this: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classesLet me know if this helps or not 🙂
April 14, 2018 at 10:28 am #550369DineshUnfortunately this did not work.
This is what I did.
On Elementor I dragged an anchor element and placed it over the section to where I’d like to scroll and I gave it an id ‘TestID’
Then I went to Apperanace->Menu
added a Custom Link to the menu item. below are the inputs I provided to the Custom link parameters
URL:
https://mywebsite.com/#TestIDCSS Classes (optional):
hide-on-desktop smooth-scrollThis does not work. it just jumps to the section(not scroll) and that too overshoots the header. does not scroll even though I have enabled smooth scroll in the theme.
I fail to understand what I’m doing wrong. you can go to my url and click the last link on the header and you will see the result I am getting by following the steps mentioned above.
April 14, 2018 at 8:39 pm #550602TomLead DeveloperLead DeveloperI’m not seeing that menu item. It looks like you’re still using the scroll to page ID plugin. It’s setting your menu items to current when you click them, which is something the built in smooth scroll doesn’t do.
How about we try to use the plugin instead? If that’s the case, the only issue is closing the slideout navigation, right?
April 14, 2018 at 9:51 pm #550618DineshThe Menu item name was an example. on the actual website the menu item when you can see what I am experiencing is called ‘What Do I Get’? if you click on that you will see what I am experiencing. I tried this by removing all page scroll to id elements and even disabling the plugin but got the same result. I can bet I am not doing something right?
Did you have a look at the steps I followed in my previous message? would that be accurate? or am I messing something up with the steps? I tried the same steps after disabling page scroll to id plugin and get the same results.
Also the only reason I used Page scroll to id in the first place was because at that time your theme did not have any in-built scrolling function(something I was hopping would be released soon). in addition to the closing out the slide-out navigation problem. page scroll to id has another problem. I was using BJ lazy load to improve the page load speed but it does not work well with page scroll to id.
The issue I have when I use the two together is the fact that the images are loaded while the page is scrolling (due to the lazy-load script) and since some of these images do not have a fixed height(I cannot give them all a fixed height), they extend the page/document length after they’re loaded.
So, when you click a link at the top the page starts scrolling to the target position, but by the time it arrives there, the target’s position has changed because other images have loaded above it.
Does your theme smooth-scroll function fix this issue? If yes I’d love to use smooth-scroll.
In short if smooth-scroll can fix the lazy load compatibility issue then I’d really need to use smooth-scroll, if I’d experience the same issues even if I switched to smooth scroll then I’d stick to page scroll to id and hopefully I can get some guidance on how to close out the slide-out menu on mobile. The slide-out menu closes just find on desktop, only mobile is having the issue.
Regards
April 15, 2018 at 10:12 am #550963TomLead DeveloperLead DeveloperUnfortunately I think most smooth scroll scripts would have that lazy load issue. They need to calculate the height of the document before scrolling, so if that height changes while scrolling, you’re going to run into issues.
Try this script in the wp_footer hook to close the slideout on click:
<script> jQuery( '.slideout-navigation a' ).on( 'click', function() { if ( /#/.test( this.href ) ) { if ( document.body.classList.contains( 'slide-opened' ) ) { window.offside.factory.closeOpenOffside(); } } } ); </script>
April 15, 2018 at 11:25 am #551033DineshThat worked. thank you so much for being so patient with me.
Would there be no code fix to ever make a scrolling website function alongside lazy load? would be an absolute winner.
Once again thank you for being patient and all your assistance.
Regards
April 15, 2018 at 8:57 pm #551271TomLead DeveloperLead DeveloperI’ll definitely look into that – sounds like something that will need to be fixed at some point.
No problem at all – glad I was able to help! 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.