...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+.
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.