• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Add Smooth Scrolling To Front Page Widgets In Infinity Pro

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:

Register for full access

Related Tutorials

  • Add Jump To Scroll Point Link Only If HTML Bookmark Exists Within Single Post Content
  • Add Smooth Scrolling To HTML Bookmark Links In Genesis

Infinity Pro Theme

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.