This tutorial provides the code which enables you to add smooth scrolling to existing widget i.d’s in any Genesis child themes front-page.php template. In this example, the smooth scrolling has been added to the Infinity Pro themes front page.
You can load the smooth scrolling in any other type of page template or in your child themes functions file if you want to add smooth scrolling to existing HTML bookmarks. When the HTML link is clicked, the page will scroll to the location with the bookmark.
In a front page template with sections of widget areas, the links are added as custom links to menu items, when clicked, scroll to each widget area which includes a div id.
Most of the new Genesis child themes include a div id in the code which calls the widget areas in the front-page.php file.
Here’s the demo video showing how the smooth scrolling works once the code is installed and the custom links added to each menu item.
Demo Video
Shows how the code adds smooth scrolling from each menu item to each widgets div i.d.
Installation
There’s 3 simple steps to install smooth scrolling after you download the files below:
Step 1 : Upload the folder named scroll to your child theme folder
Step 2 : Copy & paste the PHP code from the file named scroll.php into the file you want to add smooth scrolling to and then delete the scroll.php file from the scroll folder.
Page Template – If you only want to use smooth scrolling in your themes front-page.php file, add it to that template after the opening php tag.
Global – If you want to use smooth scrolling on other pages, posts etc, paste the PHP code at the end of your child themes functions file.
Note : Installation support is included for members.
Step 3 : Go to Appearance > Menus and add custom links to each menu item URL field like you see in the following screenshot:
You’ll need to match the div id which in the above case is #front-page-1 with the div id included in the code which calls each widget area in your front-page.php template file.
Here’s the smooth scrolling files for logged in members:
Leave a Reply
You must be logged in to post a comment.