Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to use the Smooth Scroll feature with any button on any page
Tagged: jquery.scrollTo, Smooth Scroll
- This topic has 6 replies, 3 voices, and was last updated 6 years, 11 months ago by jeremyers1.
-
AuthorPosts
-
May 23, 2017 at 11:37 am #206880jeremyers1Member
Some of the StudioPress child themes have this 'smooth scroll" feature so that when a visitor clicks the button, the screen scrolls down rather than jumps down.
Is there a way to add this to any button on any child theme? I am hoping that the jquery is built in to the Genesis core, and that by simply adding some CSS or a function to my functions.php file I can add this to any button on any page in my child theme...
I read this, but it didn't work for me...
https://gist.github.com/srikat/8254164
Blogger and Author
May 23, 2017 at 2:11 pm #206891Victor FontModeratorThe jQuery is not built into the core. Child theme developers are using jQuery localscroll. https://github.com/flesler/jquery.localScroll
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?May 23, 2017 at 2:23 pm #206893jeremyers1MemberOk. Thanks. So is there a way this can be added to the functions.php file of my child theme?
Blogger and Author
May 24, 2017 at 3:20 am #206903Brad DaltonParticipantMay 24, 2017 at 8:58 am #206925jeremyers1MemberRight ...
Maybe I need to be more specific ...
What is the exact php code I put in my functions.php file so that I can use smoothscroll on any page? Also, what code do I need to put on the button itself?
Blogger and Author
May 24, 2017 at 11:03 am #206931Victor FontModeratorYou didn't say what theme you are using so we can't help with the exact code. This is the code from the Altitude Pro theme. It is located in front-page.php:
add_action( 'wp_enqueue_scripts', 'altitude_enqueue_altitude_script' ); function altitude_enqueue_altitude_script() { wp_enqueue_script( 'altitude-script', get_bloginfo( 'stylesheet_directory' ) . '/js/home.js', array( 'jquery' ), '1.0.0' ); wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true ); wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true ); }
This should get you started in the right direction. As for the jQuery, this should help: http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html
Beyond this, you're on your own I'm afraid. As a community volunteer, I don't have the time available to write the code for you.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?May 24, 2017 at 3:30 pm #206944jeremyers1MemberThanks.
That moved me in the right direction, and I figured it out.
For anybody else who has this question, I added the following to the enqueue Scripts action in functions.php. I made it conditional so that only certain pages load the scripts.
if ( is_page( array(41794)) ) { wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true ); wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true ); wp_enqueue_script( 'scroll', get_stylesheet_directory_uri() . '/js/scroll.js', array( 'localScroll' ), '', true ); }
Blogger and Author
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.