jQuery Local Scroll flesler’s

The problem: A long list of information on a page. Solving by adding same page anchors, causes page to jump to the top on the screen.

The solution: Using jQuery, the page can elegantly scroll to the position of the desired text without the rest of the page moving, just the targeted content area scrolls.

Here’s how using proper enqueueing, setting up the jQuery function with WordPress in mind, and where to place what where in WordPress:

See it in action on the topics page; second navigation links.

Add the enqueueing either to your page template file (in the header section) or functions file.

found a better way than hard coding the path to the jQuery file that will give the path to the child theme js folder (thanks to Brandon Dove), which uses get_stylesheet_directory_uri()

for parent theme directory use get_template_directory_uri()

function lll_enqueue()
wp_register_script( 'scrollTo.min', get_stylesheet_directory_uri() . '/js/scrollTo.min.js' );
wp_register_script( 'localScroll.min', get_stylesheet_directory_uri() . '/js/localScroll.min.js' );
wp_register_script( 'topic-scroll', get_stylesheet_directory_uri() . '/js/topic-scroll.js' );

wp_enqueue_script( 'scrollTo.min' );
wp_enqueue_script( 'localScroll.min' );
wp_enqueue_script( 'topic-scroll' );

add_action('wp_enqueue_scripts', 'lll_enqueue');

We are using flesler’s jQuery local scroll for the action effect.

go to https://github.com/flesler/jquery.localScroll and get jquery.localScroll.min.js
go to https://github.com/flesler/jquery.scrollTo and get jquery.scrollTo.min.js
save as localScroll.min.js and scrollTo.min.js

Those files do not need to be touched. The file that needs to be created, we will name topic-scroll.js

To create topic-scroll.js, you need the code on flesler’s localScroll page. This snippet right here:


We are creating a js file, specifically topic-scroll.js, and changing out the id’s for the page id’s that we are using: #topic-btns for the navigation area (replaces #navigation) and #topics-col for the content area targeted (replaces #content). We, also, are including settings value for the duration attribute, duration:1000.
Here’s what is on our topic-scroll.js file

 * Handles scrolling for new topic page

 /* using localScroll
  @example $('ul.links').localScroll();
  @example $('ul.links').localScroll({ filter:'.animated', duration:400, axis:'x' });
  @example $.localScroll({ target:'#pane', axis:'xy', queue:true, event:'mouseover' });

  // Many of these defaults, belong to jQuery.ScrollTo, check it's demo for an example of each  option.
	// @see http://demos.flesler.com/jquery/scrollTo/
	// The defaults are public and can be overriden.
	$localScroll.defaults = {
		duration:1000, // How long to animate.
		axis:'y', // Which of top and left should be modified.
		event:'click', // On which event to react.
		stop:true, // Avoid queuing animations
		target: window, // What to scroll (selector or element). The whole window by default.
		reset: true // Used by $.localScroll.hash. If true, elements' scroll is resetted before actual scrolling
		lock:false, // ignore events if already animating
		lazy:false, // if true, links can be added later, and will still work.
		filter:null, // filter some anchors out of the matched elements.
		hash: false // if true, the hash of the selected link, will appear on the address bar.

jQuery(document).ready(function($) {
    target: '#topics-col', duration:1000

The js files follow the path:
generically /wp-content/themes/yourtheme/js

Place .js files in the js folder.

On the page where the action is taking place include anchor id’s to the sections that you’d like the navigation to move to and attach the id to the nav button, a href=’#response’. Also, be sure to name your div id for your navigation, topic-btns, and the area div id that you’d like the movement in, topics-col. I didn’t include the css styling.

<div id="topic-btns">
<ul class="sub2">
	<li><a href="#response">Responsive Web Design |</a></li>
	<li><a href="#type"> Typography |</a></li>
	<li><a href="#ux"> User Experience Design |</a></li>
	<li><a href="#child"> Creating a child theme</a></li>
<ul class="sub2a">
	<li><a href="#content">Creating effective Content Strategy |</a></li>
	<li><a href="#html5"> HTML 5 projects |</a></li>
	<li><a href="#css3"> CSS3 |</a></li>
	<li><a href="#cc"> Chirs Coyier</a></li>
<div id="topics-col">
<div id="response">
<h2>Responsive Web Design</h2>
-mobile layouts</div>
<h2 id="type">Typography</h2>
<h2>UX Principles</h2>
<h2 id="ux">User Experience Design</h2>
	<li>-visual design</li>
	<li>-interaction design</li>
	<li>-information architecture</li>
<h2>What are our favorite websites</h2>
and why do we love them?
A/b testing
<h2>Planning phase</h2>
<h2>Creative process</h2>
	<li>-surviving the creative process</li>
	<li>-how to avoid creative burnout</li>
<h2 id="child">Creating a child theme</h2>
<h2 id="content">Creating effective content strategy for your website</h2>
<h2 id="html5">HTML 5 projects</h2>
<h2 id="css3">CSS3</h2>
<h2 id="cc">Chris Coyier</h2>

Leave a Reply

Your email address will not be published. Required fields are marked *