Nice scroll to wordpress

Question

I am converting html5 to wordpress Theme. I want to use custom scroll for wordpress. The code

DEPENDENCIES It's a plugin for the jquery framework, you need to include jquery in your scripts.

I will use

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

Will it work just by that What about below code?

$(document).ready(
  function() {
    $("html").niceScroll();
  }
);

EXAMPLES 1. Simple mode, it styles document scrollbar (html element prefered):

Where to enter this to make it work?

After enqueuing , do i need it again to add in header.php Explanation will be helpful.

How to use this code?

var seq = 0;

  $(document).ready(function() {    
    $("html").niceScroll({styler:"fb",cursorcolor:"#000"});

    $("#mainlogo img").eq(1).hide();
    function goSeq() {
      var nxt = (seq+1)%2;
      $("#mainlogo img").eq(seq).fadeIn(2000);
      $("#mainlogo img").eq(nxt).fadeOut(2000);
      seq = nxt;
      setTimeout(goSeq,2500);
    };
    goSeq();

    $(window).load(function(){
      setTimeout(function(){
        $("#gmbox div").animate({'top':60},1500,"easeOutElastic");
      },1500);
    });

    function trackLink(link, category, action) {
      try {
        _gaq.push(['_trackEvent', 'tracklink' ,'click',link.href ]);
        setTimeout('document.location = "' + link.href + '"', 100)
      }catch(err){}
    }

    $('[rel="outbound"]').click(function(e){      
      try {
        _gaq.push(['_trackEvent','outbound','click',this.href]);
      }catch(err){}
    });

  });

Answer 1

wordpress runs jquery in noconflicts mode which means that you either need to write your JS code using the jQuery function call

$(document).ready(
  function() {
    jQuery("html").niceScroll();
  }
);

or the following syntax which define $

$(document).ready(
  function($) {
    $("html").niceScroll();
  }
);

Answer 2

In WordPress, you could put the script in header too.

But as the best practice. Save your file as script.js and call your script with

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

in functions.php

$handle = name, anything you want.

$src = where the file is.

$deps = dependencies, your script depends to jQuery. So load the jQUery first than your code.

$ver = version of your code

$in_footer = default is false, it means your code put in header.

The code for you, put in functions.php

if ( ! function_exists( 'your_enqueue' ) ) :
    function your_enqueue(){
wp_enqueue_script(' name ', get_template_directory_uri(). '/script.js' , array('jquery')), '1.0', false);
}
endif;
add_action('wp_enqueue_scripts', 'your_enqueue');

what I wrote above is one of the best practice to insert a javascript that highly recommended from WordPress team.

Please refer to,

1. http://codex.wordpress.org/Function_Reference/wp_enqueue_script
2. http://codex.wordpress.org/Function_Reference/get_template_directory_uri