Conflict and Problems when implementing custom scroll bar

Good day SO, just want to ask the community regarding my problem with the scroll bar I’m trying to implement on my website. Basically after i successfully implemented a custom scroll bar on my page some of the jquery plugins i have developed doesn’t seem to be working correctly.

Here is the link to the page -

Whenever i click the left and right buttons on the slider the page seems to be scrolling back to the top which is weird. I’m also using jQuery waypoints on the page so when the user scrolls down to a certain portion more items will be visible and loaded. The only feature that is working fine is the lightbox/fancybox

Here is the link to the page without a custom scroll bar

everything seems to be working fine without the custom scroll bar being implemented. I really hope someone can help me implement the custom scroll bar without having any conflicts with the other features.


    <div class="post_slider" id="scroll" > <!--START POST SLIDER -->
	<?php //RED ROAST SLIDER ?>
		<div class="slider_container hide">
		    <div class="category">
			    <h2 class="category_title controls">Red Roast
				  <input id="prev_btn_redroast" class="prev_btn" type="button" value="Prev">
				  <input id="next_btn_redroast" class="next_btn" type="button" value="Next">
		    <?php query_posts('posts_per_page=-1&cat=3'); if(have_posts()) : while(have_posts()) :the_post(); ?>
		    <?php $url = MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image'); ?>
	        <div class="post post_redroast">

			   <?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<img src="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" alt="' . the_title_attribute('echo=0') . '">';  } ?>
			   	<div class="large_item">
			        <a class="fancybox" href="<?php echo $url; ?>"><span><?php the_title(); ?></span></a>
			   <h2><span><?php the_title(); ?></span></h2>
		    <?php endwhile; endif; wp_reset_query();?>

        var $item = $('div.post_redroast'),
        w = $item.outerWidth( true ),
        visible = 1,
        index = 0,
        endIndex = $item.length - Math.floor($("div.post_slider").width()/w);

        if(index < endIndex ){
        $item.animate({'left':'-=' + w + 'px'}, "fast");

      if(index > 0){
		$item.animate({'left':'+=' + w + 'px'}, "fast");

    <script type="text/javascript">

	    $(this).addClass("animated slideInLeft").removeClass("hide");

          }, {offset: '80%', context: '.post_slider'});	

			autoDraggerLength: true


If you examine either page in the console, you see:

Uncaught TypeError: Cannot call method 'removeAttribute' of null (index):887

That would be the first thing to look at.