- This topic has 17 replies, 6 voices, and was last updated 5 years, 9 months ago by Leo.
-
AuthorPosts
-
March 14, 2016 at 5:08 am #179172Andi
Hi Tom,
I have a hopefully short and easy question:
On my website andisaitenhieb.de I added a few scroll down links to the top.
Now I thought it would be way cool if the user could scroll as slow and smoothly down as he scrolls up when hitting the themes up-arrow.I checked your arrow with chrome inspector and added
data-scroll-speed=”400″ data-start-scroll=”300″
to the last link “Workshop- & Konzerttermine” but that didn’t do anything:
Workshop- & KonzerttermineI never did that kind of thing before and I’m no HTMl / CSS expert. I thought you have programmed something into the theme and I could re-use that to my other scroll link also?
Hopefully there’s an easy trick I can add that to my links. 🙂(I also checked here in the forum, but the plugin recommended hasn’t been updated in 2 years. Also I don’t want to add another plugin.)
Thanks a lot,
AndiMarch 14, 2016 at 9:00 am #179256TomLead DeveloperLead DeveloperHi there,
You can achieve this by added this code to the wp_footer hook in GP Hooks:
<script> jQuery('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) { var target = jQuery(this.hash); target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']'); if (target.length) { jQuery('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); </script>
Let me know if you need more info 🙂
March 14, 2016 at 12:06 pm #179307AndiFantastic! Thanks so much, I never would have found this on my own. 🙂
I just added the anchor and the link to it and nothing else (except for the wp_footer code of course).
If you have a link to somewhere I can read about this (e g what this data-scroll-speed is for respectively how to adjust that) that would be nice, but I’m already happy with the way it is.Great work, once again. And hopefully usefull to others as well!
All the best,
AndiMarch 14, 2016 at 3:05 pm #179323TomLead DeveloperLead DeveloperThe data-scroll-speed etc.. are specific to the back to top button – those tags allow you to adjust the values for the button.
Glad I was able to help 🙂
July 1, 2017 at 2:07 pm #342588Branislav PakicThere seems to be a conflict between this code an the tabs in Woocommerce. Once I add this code to the footer hook, the Description / Reviews tab panels in Woocommerce both get a display: none; and become invisible.
Is there a way to have both smooth-scroll and tabs working?
Cheers!
July 2, 2017 at 12:04 am #342739TomLead DeveloperLead DeveloperHmm, are you sure it’s that code? It doesn’t have any hide() functions going on, so it shouldn’t be setting anything to display:none.
July 2, 2017 at 4:56 am #342798Branislav PakicYes, I’m pretty sure. As soon as I disabled the footer hook woocommerce tabs came back to normal.
July 2, 2017 at 8:45 am #342867TomLead DeveloperLead DeveloperAny chance you can send me temporary login details so I can see the account page?: https://generatepress.com/contact/
July 2, 2017 at 9:19 am #342895Branislav PakicSure, I’m sending you a mail right now.
July 2, 2017 at 11:15 am #342973TomLead DeveloperLead DeveloperVery strange, can you try this: https://generatepress.com/forums/topic/smooth-scroll-on-single-page-site/#post-319645
It requires you to add the smooth class to the links you want to apply this to, which will prevent it from firing on links that shouldn’t have it.
July 2, 2017 at 11:21 am #342982Branislav PakicThat solution works. Thanks!
July 2, 2017 at 9:18 pm #343163TomLead DeveloperLead DeveloperYou’re welcome 🙂
April 6, 2018 at 4:36 am #542823Jaakko PöntinenWant to bounce this, Tom’s first suggestion did it for me. Using SiteOrigins Pagebuilder – no conflicts.
Put the following in wp_footer hook in GP Hooks
<script> jQuery('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) { var target = jQuery(this.hash); target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']'); if (target.length) { jQuery('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); </script>
April 6, 2018 at 8:32 am #543038LeoStaffCustomer SupportThe smooth scroll is actually a built in option now: https://generatepress.com/forums/topic/anchor-link-content-shows-up-under-sticky-menu/#post-532629
April 9, 2018 at 1:34 pm #545689Jaakko PöntinenHey, Leo!
It seems that way, yes, but using the built-in one, I wasn’t able to achieve smooth scrolling, at least not with anchor-links placed with SiteOrigins Pagebuilder.
However, the code Tom provided worked 1st time 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.