Dependencies

Smooth Div Scroll is not a stand-alone script. It depends on a couple of other jQuery libraries to work. These are:

jQuery
Of course you'll need jQuery since this is a jQuery plugin. The absolutely best way to add jQuery to your page is to use Google's library API CDN (Content Delivery Network). Why? It's fast, free and it's also very likely that the person visiting your site already has a cached version of jQuery which will make your site load faster. Also make it a habit of using the minified version of all standard libraries since they are much more compact and will load faster.

Here's what the tag that loads jQuery looks like:
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
```
Please visit Google library API for the latest version to load.
jQuery UI (widget and effects)
Here you can choose if you want to load the full jQuery UI library from Google's library API or make a slimmer custom version of that contains only widget and effects, that you'd host on your own server. In the demos and examples on these pages I use a custom version because I don't run any other plugins that need jQuery UI.

If you want to load jQuery UI from Google's library API, it looks like this:
```
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
```
Please visit Google library API for the latest version to load.

If you want to use your own slim and customized version of jQuery UI, you can either get my custom file or build your own at http://jqueryui.com/download .

Here's what it would look like if you use your own custom version (alter the path to the folder where you keep your JavaScript files):
```
<script src="js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
```
Regardless of what you do, you should familiarize yourself with the jQuery UI site and library. It's good stuff and fun to explore!
jQuery Mouse Wheel by Brandon Aaron
This plugin is used for the mousewheel scrolling. Even if you don't plan on enabling mousewheel scrolling, you need this plugin. Otherwise Smooth Div Scroll won't work. Download it from https://github.com/brandonaaron/jquery-mousewheel/downloads. Brandon Aaron also has a demo page if you want to know more about jQuery Mouse Wheel.

Here's what it looks like on your page (alter the path to the folder where you keep your JavaScript files):
```
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
```
jQuery Kinetic by Dave Taylor
This plugin is used for the touch scrolling. Even if you don't plan on enabling mousewheel scrolling, I think you need to add this plugin. Download it from https://github.com/davetayls/jquery.kinetic/downloads. Dave Taylor also has a demo page if you want to know more about jQuery Kinetic.

Here's what it looks like on your page (alter the path to the folder where you keep your JavaScript files):
```
<script src="js/jquery.kinetic.js" type="text/javascript"></script>
```

Apart from these libraries you will of course need to load Smooth Div Scroll. So if you put it all together it will look something like this:


<!-- LOAD JAVASCRIPT LATE - JUST BEFORE CLOSING THE BODY TAG. 
That way the browser will have loaded the images and will 
know the width of the images. No need to specify the width 
in the CSS or inline. -->

<!-- jQuery library - Please load it from Google API's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>

<!-- jQuery UI Widget and Effects Core (custom download)
You can make your own at: http://jqueryui.com/download -->
<script src="js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
	
<!-- Latest version of jQuery Mouse Wheel by Brandon Aaron
You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>

<!-- jQuery Kinetic - for touch -->
<script src="js/jquery.kinetic.js" type="text/javascript"></script>

<!-- Smooth Div Scroll 1.3 minified-->
<script src="js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>

<!-- If you want to look at the uncompressed version you find it at
js/jquery.smoothDivScroll-1.3.js -->


<!-- Plugin initialization -->
<script type="text/javascript">
	// Initialize the plugin with no custom options
	$(document).ready(function() {
		$("#makeMeScrollable").smoothDivScroll();
	});
</script>

Please, please don't use the files on my website for loading your JavaScript files! This is very important since it will increase the amount of traffic on my ISP account and probably make your site slower than it has to be. I have pointed out the alternatives above - use them. Thanks!

Back to index