Ben writes,
Clicking on the ‘Our Work’ button on the home page of the Agency Template results in a smooth scroll to the anchor half way down the page.
However, when I create a button on other pages which I would also like to smooth scroll, it just jumps instantly down the page.
I suggested Page scroll to id WordPress plugin for this but he wanted to do this w/o using a plugin especially since he wanted it to implement smooth scroll in a inner page of Agency Pro and Agency Pro already has the needed js files.
In this tutorial I show how we can use the code present in Agency Pro to make hyperlinks pointing to #IDs within the same webpage to scroll smoothly in any Genesis child theme.
Step 1
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Hi Sridhar!
Great post! I just did similar on Prose theme using page scroll to ID on the home page of this site: http://www.bellafiguracommunications.com
Would this method have been possible? Did not know how to make that work and preserve ability to easily update in future.
Yes, this method should work in any WordPress theme, not just in Genesis child themes.
Thanks Sridhar! I meant Genesis Prose theme, it’s a little different from the rest.
Yes. I am aware that it does have a input area to put in custom functions. Go ahead and give it a try. Let me know if it doesn’t work. I shall take a look.
Thanks again!
Great information Sridhar, I’ve only been subscribed to your blog for a couple of weeks and love the info that you furnish.
I noticed a feature on this page of your blog that I’ve never seen before, the small black circle with the ^ in it to scroll back to the top located on lower right hand corner. Have you done a “How to” on it? If so, please link to it, if not, I would love to have a how to so that I can incorporate it on my sites.
See http://www.sridharkatakam.com/favorite-plugin/dynamic-to-top/
Hi! Thanks for a great tutorial! I was just wondering if it is possible to set an offset with your code? I have a sticky navigation so the scroll makes the header text invisible
Perhaps top padding can be used? Can you provide the URL of your site?
Hi! Thank you for your reply! My url: http://nagelmedia.no
Hi Sridhar
Was there an answer/solution for an offset for the smooth scrolling for a sticky header??
Phil
Phil,
I recommend using ‘Page scroll to id’ WordPress plugin. It has offset feature built-in. We can either specify the CSS class or ID of the sticky header or specify its height in px in the plugin’s settings.
Hi Sridhar,
I hope you are well….
Firstly, thanks for the tutorial….brilliant
I implemented this successfully on the client test site and the scrolling works well when it goes back up to the top (Header area)…
Is it possible to change some value that would allow the scrolling to take effect downwards – in other words when a Navigation Menu tab is clicked. At the moment, it scrolls immediately…
Is it possible to slow down the action?
Regards
Greg
It works! Thank you.
Well done… easily implemented in 5 minutes.
Hello,
Thanks for this awesome explanation. I have changed the duration to 1200, but it is still a little bit fast, I want it a bit slower.
Do you have any idea for a slow scroll!?
Thank you a lot.
so useful !!! thank you !
Great! It works fine.
Hi Sridhar – Thanks for this great tutorial! This solution is working great with all browser except Firefox, do you know of any known issues with that?
Thanks, a.
Hi Sridhar – Thanks for this great tutorial! This solution is working great with all browser except Firefox, do you know of any known issues with that?
Thanks, a.
Can you provide the URL of your site?
I have tried to make this tutorial work in Minimum Pro 3.2.1 but with no success.
I use a plugin for referencing. It’s named Zotpress:
https://wordpress.org/plugins/zotpress/
From ín-text-links like this one, [1], Zotpress creates in-page anchor-links to the reference list at the bottom of the page. Primarily I would need help with how to make the in-text links work, so that they are not half covered because of my fixed header: there is some problem with the “offset-thing”. Secondarily it would be great to have a smooth scrolling to the reference at the bottom of the page.
I also tried the Page scroll to id plugin, but found it difficult to understand how to make it work with Zotpress, and thought all its great options seemed a bit overkill for the two problems I wanted to solve. If someone here thinks it’s the best solution to use Page scroll to id I’m of course willing to give it a try, but then I would need guidance on how to set it up correctly.
The page where I’m trying to solve my problem with Zotpress and anchor links is this one:
http://exp.silent.se/exp-en/zotpress-test-page/
I checked the source code of your page and do not see any references to
jquery.scrollTo.min.js
jquery.localScroll.min.js
scrollto-init.js
Are you not enqueuing them in functions.php?
I apologize. I removed the three js and the code for the functions.php since they seem to do nothing. Now I have added them again.