WordPress Smooth Scroll – jQuery Scroll Top (Without Plugin)

Smooth scrolling is one of the most wanted feature of one page website. If you are in search of a piece of code which let you help make your website a wonderful one page. Stunning effect and lazy scroll.

Share

Smooth Scroll creates stunning visuals to the viewer. Usually a button placed at the bottom right corner to enhanced the usability of website. Normally we can create single page website with smooth scrolling. Below are some tips for WordPress Smooth Scroll jQuery and multiple snippet if any conflicts. Usually this tutorial lead to scroll to top in WordPress using jQuery.

WordPress Smooth Scroll:

  • Go to your default theme folder via  wp-content > themes > your_theme.
  • Open functions.php  and paste the following code. The code will add automatically jQuery script to the footer and header.

Smooth scroll code for functions.php.

add_action ('wp_footer','footer_tc');
add_action ('wp_header','header_tc');
function footer_tc(){
 echo '<a href="#top" id="bottom"> ^ </a>';
 wp_enqueue_script("jquery");
?>

<script type="text/javascript">
 jQuery(document).ready(function($) {
    $('a[href^="#"]').on('click', function(event) {
    var target = $(this.getAttribute('href'));
    if( target.length ) {
        event.preventDefault();
        $('html, body').stop().animate({
            scrollTop: target.offset().top
        }, 1000);
    }
    });
});
</script>

<?php
}
function header_tc(){
 echo '<a href="#bottom" id="top"></a>';
}

 

Smooth Scroll Problem in WordPress

Most of the time scrolling in jQuery stops working. Check your console log if error persist like  $ is not a functionDon’t worry it’s not your smooth scroll function problem. Just replace your “$” with “jQuery” because it some time happens in WordPress

 

Leave a Reply

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