How to Scroll Down to a Specific Page Element in WordPress Using JQuery

Some sites have huge banner pictures that take up the full screen when it’s first loaded. Users then have to scroll down to read the content. While this might be suitable for many pages, there might be certain posts where you want visitors to be able to start reading immediately. Perhaps it’s a landing page for an advertising campaign and you want to present the content to your users as quickly as possible. Maybe a particular article or page is so important, that you want your users to start reading immediately. However, we don’t want to get rid of the banner for these pages – we just want to automatically scroll past it.

Whatever the reason, I will show you how to automatically and smoothly scroll to a certain page element in WordPress. You can modify the code so that it only scrolls on certain pages, and you can also customize the element depending on which page it is.

Step 1: Create the jQuery Javascript Code for Scrollling

We’ll be using the jQuery library that comes automatically bundled in WordPress for this. Moreover, this solution won’t require you to create any files and place them on your server. Instead, we’ll be adding all the code inline using a new WordPress 4.5 function that wasn’t available earlier.

As a test example, here’s the element I want to scroll down to on my sample page:

This is an “H3” heading with the title “Heading 3”. However, it’s not the first <h3> tag. As you can see in the code, the previous heading is also an “H3” heading with the text “Heading 2”. To target this specific element, I use the following Javascript code with jQuery:

<script type="text/javascript">
jQuery(document).ready(function($) {
$('html, body').animate({
    scrollTop: ($("h3:contains('Heading 3')").offset().top)
},500);
});
</script>

The important part is highlighted in bold. Namely “h3:contains(‘Heading 2’)”. It says that we’re looking for an <h3> tag that contains the words “Heading 2”. You can modify this to identify any given element on your site. You can get a complete reference for selecting HTML elements using jQuery using the w3schools link.

Step 2: Enqueuing the Code in WordPress

Normally, we enqueue scripts in WordPress using the wp_enqueue_script function. The problem with this function is that it expects a file containing the Javascript code. We can’t just use inline Javascript. A poor solution is to use the wp_head or wp_footer action hooks to print the code into the WordPress page. Unfortunately, our code depends on jQuery and we need to ensure that it’s loaded first.

Before WordPress 4.5, there wasn’t a solution to this problem. We had to either create files holding the Javascript code, or we needed to unreliably print it onto the page. With version 4.5 however, we gained access to a new function called wp_add_inline_script, that allowed us to add inline scripts to existing Javascript hooks!

So to add the above Javascript code to WordPress, we use the following code in our functions.php:

function add_scrolling_code() {
    
    if (get_the_ID() != 2427)
        return;
    
    if(!wp_script_is('jquery', 'done')) {
      wp_enqueue_script('jquery');
    }

$element = "h3:contains('Heading 3')";

$inline_script = <<<EOD
<script type="text/javascript">
jQuery(document).ready(function($) {
$('html, body').animate({
    scrollTop: ($("$element").offset().top)
},500);
});
</script>
EOD;

    wp_add_inline_script( 'jquery-migrate', $inline_script );

}
add_action( 'wp_enqueue_scripts', 'add_scrolling_code' );

If you don’t know how to add code to your WordPress installation, check out my earlier tutorial on the same.

In this code, I first check to see if we’re on the page we need. Without this, we will automatically scroll for all pages! next, I store the Javascript in a variable using the HEREDOC PHP syntax with variable parsing. The section in bold contains the element specification and we use the variable in the Javascript. This allows us to easily change the element based on any given condition – for example, if you want to scroll to different elements based on the page, you only need to change that one line instead of having to create entire blocks of duplicate code.

The wp_add_inline_script function along with jQuery, allows us to have a smooth scrolling experience on WordPress. The technique is scalable for any number of pages with different scrolling requirements – just change the variable value to specify the new element with an appropriate “if” condition!