jakebontune / jquery-tata

Completely customisable jquery plugin takes you to the top of the container with a click

Tata

...try saying "to top" really fast

Tata is a very simple jQuery plugin that scrolls your container to its top. The interesting part is that you can use it on multiple containers on the same page. Requires jQuery 1.7+.

Implementation

---

Again it's very simple to use:

Include tata.css, jQuery, and tata.min.js in your page like so:

<link href="tata.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="tata.min.js></script>

And also place the up.png near tata.css.

Then activate Tata:

var container = $('.container');
container.tata();

To call Tata on multiple containers:

var containers = $('.section, .anothersection');
containers.tata();

By default Tata will include a small arrow on the bottom right of the container. Of course, you can edit the css to use your own image.

There are a number of settings that you can alter to get the most out of your Tata experience. Here are the defaults:

tataWait : 600, // the position the scroll bar has to be at before Tata shows up
fadeInSpeed: 200 // Tata fade in speed
fadeOutSpeed: 200 // Tata fade out speed
scrollSpeed: 500 // the scroll speed to the top
scrollAnimType: "swing", // the scroll animation type. use the jquery easing plugin for more options i.e. 'easeOutElastic' for a more rubbery effect :)
distRight: 30, // the position of Tata from the right of its container
distBottom: 20 // the postiion of Tata from the bottom of its container

To change the settings:

container = $('.container');
container.tata({
	scrollSpeed: 300,
	distRight: 40
});

There's a more advanced and customizable version of Tata being built with bootstrap 3 in mind. So check back for updates.

###License

---

Tata is open source under the MIT license. Enjoy!

---

Copyright © 2013. Joseph Ayo-Vaughan.