JQuery Library/Bump Box conflict

I am using the jquery library for my site and bump box. I want to use the bump box for a few items on the site as well as utilize a smooth scrolling when an image is clicked on the page (it takes you to the bottom of the page by smoothly auto scrolling the entire page. There is also a button at the bottom to do the opposite). If I link my index.html to one of the .js files via <script>, the other is killed. Here is the scroll code linked by scroll.js :[FONT='Trebuchet MS', Helvetica, Arial, sans-serif]
[/FONT]

[COLOR=#141414][FONT=Trebuchet MS]
$(document).ready(function(){$(".scroll").click(function(event){//prevent the default action for the click eventevent.preventDefault();//get the full url - like mysitecom/index.htm#homevar full_url = this.href;//split the url by # and get the anchor target name - home in mysitecom/index.htm#homevar parts = full_url.split("#");var trgt = parts[1];//get the top offset of the target anchorvar target_offset = $("#"+trgt).offset();var target_top = target_offset.top;//goto that anchor by setting the body scroll top to anchor top$('html, body').animate({scrollTop:target_top}, 1200);});});[/FONT][/COLOR]

Code (markup):

Not great with javascript or jquery. Any help would be awesome!