jQuery ScrollTo and JQuery Local Scroll are JQuery Plugins (means simple Js which needed to be included in WordPress HTML Header) can make excellent effects in longer, bigger posts and adds a better accessibility. So, first one should know, what is JQuery. A developer not require to know what is JQuery, but an average on-IT user might get interest. Keep in mind – we are using latest WordPress and no WordPress Plugin will be used for this guide on jQuery ScrollTo and Custom Tables in WordPress Posts. A similar article but mainly intended for the developers was published before – How to Correctly Include jQuery-UI Effects on WordPress. You need not to read that article for this usage – we have included all the required need to know things.
Working Table below is Serving Dual Purpose – Example and Ease of Usage
| Table of Contents |
jQuery ScrollTo and Custom Tables in WordPress Posts : Knowing the JQuery Part
---
Please read the article on WP Enqueue Script For WordPress Themes. Inside the head tags we will have to load jQuery, scrollTo and localscroll via WP Enqueue and you must know the capabilities from Official Resource :
1 2 | http://demos.flesler.com/jquery/scrollTo/ http://demos.flesler.com/jquery/localScroll/ |
As for this guide on jQuery ScrollTo and Custom Tables in WordPress Posts, the usage is custom and dependent on user, we will suggest to include all three – jQuery, scrollTo and localscroll. Download them from the Author’s GitHub repository, upload to any CDN and use WordPress Enqueue Script to include in header :
1 2 3 4 | function theme_name_scripts() { wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'theme_name_scripts' ); |
Definitely, you will add three for three scripts. Read the above linked article to clarify the topic, if you need.
jQuery ScrollTo and Custom Tables in WordPress Posts : The HTML Part
We have used this HTML for creation of the table :
1 2 3 4 5 6 7 8 9 10 11 12 | <table class="toc" id="toc" summary="jQuery ScrollTo and Custom Tables in WordPress Posts"> <tbody> <tr> <td><i class="icon-ebooks"></i>Table of Contents <ul> <li class="toclevel-1"><a href="#Introduction"><span class="tocnumber">1</span> <span class="toctext">Introduction</span></a></li> <li class="toclevel-1"><a href="#Basics"><span class="tocnumber">2</span> <span class="toctext">Knowing the JQuery Part</span></a></li> <li class="toclevel-1"><a href="#HTML"><span class="tocnumber">3</span> <span class="toctext">The HTML Part</span></a></li> </ul> </td> </tr> </tbody> |
For creation of the links, we have included the target with span class :
1 | <h3><span class="mw-headline" id="HTML">jQuery ScrollTo and Custom Tables in WordPress Posts : The HTML Part</span></h3> |
For the creation of Go to Top, we have used this HTML :
1 | <a href="#Introduction"><span class="tocnumber"><i class="icon-home"></i></span> <span class="toctext">Go To Top of This Article</span></a> |
Obviously, all these has been added in WordPress Post in Text mode – not in Visual mode in writing pane. You are viewing various accompanying icons – Tables, Home icon; they has been added using Icon Font as described here. We are using full HTML5 Theme.
