September 18th, 2009
Horizontal scroll using jquery scrollTo
You may already saw this in some other website scrolling horizontal and vertical smoothly with easing. I will show you how to do this using jquery scrollTo plugin. I’m not going show you the full details about this plugin. You can visit Ariel Flesler : jquery.ScrollTo to see detailed instruction and more settings.
First download the easing and scrollTo plugins.
Add scrollTo and the easing plugins
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
For the style of the page
/* reset.css */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;} body {line-height:1.5;} table {border-collapse:separate;border-spacing:0;} caption, th, td {text-align:left;font-weight:normal;} table, td, th {vertical-align:middle;} blockquote:before, blockquote:after, q:before, q:after {content:"";} blockquote, q {quotes:"" "";} a img {border:none;} body{background:url(images/bg_pattern.jpg) repeat;} .wrapper{width:5500px; height:300px; padding-top:150px; position:relative;z-index:0;} .f_box{padding:0 500px 0 500px; width:390px; float:left} .f_box_inner{background:url(images/html.jpg) no-repeat; width:336; height:246px; display:block;} .s_box{padding:0 500px 0 500px; width:390px; float:left} .s_box_inner{background:url(images/css.jpg) no-repeat; width:336; height:246px; display:block;} .t_box{padding:0 0 0 500px; width:390px; float:left} .t_box_inner{background:url(images/jquery.jpg) no-repeat; width:336; height:246px; display:block;} .nav{height:32px;padding:200px 0 0 556px;width:250px; z-index:1; position:fixed} #btn_one, #btn_two, #btn_three{display:block; text-indent:-2000px; overflow:hidden; float:left;margin:0 5px;} #btn_one{width:63px; height:24px; background:url(images/html_btn.gif);} #btn_one:hover{background:url(images/html_btn_hover.gif);} #btn_two{width:43px; height:24px; background:url(images/css_btn.gif);} #btn_two:hover{background:url(images/css_btn_hover.gif);} #btn_three{width:90px; height:24px; background:url(images/jquery_btn.gif);} #btn_three:hover{background:url(images/jquery_btn_hover.gif);}
Structure of our page
<div> <div> <a id="btn_one" href="#first">html</a> <a id="btn_two" href="#second">css</a> <a id="btn_three" href="#third">jquery</a> </div> </div>
Now add the easing function
// easing function $.easing.elasout = function(x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; };
Reset the scroll page and add the click event function for the buttons
//resets the page $('div.wrapper').scrollTo( 0 ); $.scrollTo( 0 ); // click function $('#btn_one').click(function(){ $('.nav').fadeOut("slow").fadeIn("slow"); $.scrollTo(this.hash, 1500); }); $('#btn_two').click(function(){ $('.nav').fadeOut("fast").fadeIn("slow"); $.scrollTo(this.hash, 1500, { easing:'elasout' }); }); $('#btn_three').click(function(){ $('.nav').fadeOut("fast").fadeIn("slow"); $.scrollTo(this.hash, 1500, { easing:'elasout' }); });
09.$(‘#btn_one’).click(function(){
10.$(‘.nav’).fadeOut(“slow”).fadeIn(“slow”);
11.$.scrollTo(this.hash, 1500);
12.});
I’ve noticed you’ve not used easing with your first section, iv tried implementing it but it acts odd, a bit jerky as it runs out of screen or somthing!
any idea on how to fix it?
cheers, alex.
Hi Alex
Yes I didn’t use it in first because there’s not enough space to do the elastic bounce right. Maybe you can show me your sample and I try what I can do.
Thanks,
Arvind
Hi –
Great tutorial, but i’m getting flickering when using anchors (in safari and firefox).
Have you had any experiences / fixes for this?
My test page is http://timdavis.me/test/hor/#home
how can i add another page and link button to each added page…?
I would just like to start off by saying thank you and what a great tutorial!!!
I’m trying to implement a next and previous button to the javascript… how would I be able to do that? and I would also like to use two navigations to control the same horizontal slider…
Thank you.
Phelipe
Hello,
I have created and shared a JQuery Horizontal Slider.
Check it out http://lxcblog.com/2010/10/14/jquery-horizontal-slider-sliding-doors-tabs/
Let me know if you like it.
Thanks.
Nice article!
I need your help in the following aspect:
Suppose I want to put the scrollable div into a table cell of width 1000px and I want the div to be scrollable within the cell.How can I do this?