Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by Konstantin Nikkari
Konstantin Nikkari
5,185 Points

JavaScript in WordPress to make Smooth Scroll effect

Hey,

I'd like to have Smooth Scroll effect in this site http://konstantin.raccoonbox.com/osta-palveluita/. The site is WordPress site and it is a problem. I don't know how to connect JavaScript/jQuery in WordPress. All the WordPress plugin that I have seen are either useless, bad, or messes the whole site. That is why I don't want to use them.

I would love to have a smooth scroll in that site when pressing those orange buttons ("WordPress Sivut" and "Koodatut Sivut"). Or if you go to the very bottom of the site you will see "Raccoonbox tarjoaa ilmaisen kyydin ylös" -link (Trans. Raccoonbox offers a free ride to top) which is written in WordPress footer.php file.

How can you do smooth scroll in wordpress without a plugin?

2 Answers

Louis Otto
Louis Otto
23,264 Points
Louis Otto
Louis Otto
23,264 Points

Hi Konstantin,

You can add smooth scroll very easily by using this plugin: https://github.com/cferdinandi/smooth-scroll

Check out the demo page to see the various effects.

In terms of adding to wordpress, you can simply edit your header.php file to include the js, and then manipulate the generated HTML in your page files to include the specific anchor tags.

Hope this helps!

Konstantin Nikkari
Konstantin Nikkari
5,185 Points

Okey, so I just learned that WordPress loads jQuery by default and you can find the JS folder in wp-includes/js/jquery

You are saying that I could add this

<script>
    smoothScroll.init();
</script>

into my header.php file and all anchor links would work?

Konstantin Nikkari
Konstantin Nikkari
5,185 Points

I have in my footer.php

      <script src="dist/js/smooth-scroll.js"></script>
      <script>
          smoothScroll.init();
      </script>

I have in my "Raccoonbox tarjoaa ilmaisen kyydin ylös" -link (Trans. Raccoonbox offers a free ride to top)

<a data-scroll href="#" id="totop">

and I upload the smoothScroll js folder in my canvas child theme folder and this is still not working.

I just wish this would be as easy as in plain HTML site :(

Michael Buxton
Michael Buxton
3,090 Points
Michael Buxton
Michael Buxton
3,090 Points

I have been experiencing the same issue but managed to fix it. Try adding the script in the header rather than the footer.

You can enqueue the script in the header by setting the in $in_footer parameter to false. See below:

wp_enqueue_script( 'smooth-scroll', get_template_directory_uri() . '/js/smooth-scroll.js', array('jquery'), 'null', false );