Wordpress Javascript Conflict; total js beginner

Question

I have a javascript conflict on the homepage of this site: http://antimatterweblab.info/ws

There are two things that use javascript:

1. a date picker for the booking system, which is created by a plugin called 'Booking' and which is happy to use Wordpress' own javascript

2. A nav bar on the right of the screen that allows users to navigate to different sections of the homepage, which uses this code as well as Google's jQuery library:

   <!-- animate to section-->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
   <script>
   function goToByScroll(id){
           $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
       }
   
       var t = $("#anchor-point").offset().top;
   
       $(document).scroll(function(){
           if($(this).scrollTop() > t)
           {   
               $('#voice2').css({"border-bottom":"2px solid #f4f5f8"});
               $('#voice3').css({"border-bottom":"2px solid #2e375b"});
               $('#voice3').css({"border-bottom":"2px solid #2e375b"});
               $('#voice3').css({"border-bottom":"2px solid #2e375b"});
               $('#voice3').css({"border-bottom":"2px solid #2e375b"});
           }
       });
   </script>
   

The animation then works using this HTML:

<a href="javascript:void(0)" onClick="goToByScroll('house')"><div class="navcirc"></div></a>

...however, by using the Google library, the calendar doesn't work, and without the Google library, the goToByScroll function doesn't work.

THINGS I HAVE TRIED ALREADY

1. Using a plugin to make Wordpress use Google's libraries instead made no difference - the scroll function still doesn't work unless the Google library has been called separately

2. Advice I have read elsewhere says to wrap the code in this:

   (function($){
   
   $(document).ready(function(){
    //document ready code here
   });
   
   })(jQuery);
   

...which I interpret as meaning to do this:

<!-- animate to section-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
(function($){
        function goToByScroll(id){
            $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
        }

        var t = $("#anchor-point").offset().top;

        $(document).scroll(function(){
            if($(this).scrollTop() > t)
            {   
                $('#voice2').css({"border-bottom":"2px solid #f4f5f8"});
                $('#voice3').css({"border-bottom":"2px solid #2e375b"});
                $('#voice3').css({"border-bottom":"2px solid #2e375b"});
                $('#voice3').css({"border-bottom":"2px solid #2e375b"});
                $('#voice3').css({"border-bottom":"2px solid #2e375b"});
            }
        });
})(jQuery);
</script>

This simply ends up disabling both the calendar and the scroller.

I have no idea what I'm doing. Any help would be appreciated!

Many thanks!

Answer 1

Looks like jquery uses an alternate shortcut on your page.

Instead of the $ shortcut it is defined as jQuery.

Change your script like this and try it again:

    function goToByScroll(id){
            jQuery('html,body').animate({scrollTop: jQuery("#"+id).offset().top},'slow');
        }