18th
Sep
Horizontal scroll using jquery scrollTo
Jquery | 5 Comments | Tags: Css, html, Jquery, scroll
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
Hi tim,
Thanks, I saw you test page. try putting div class wrapper outside your design, home, music. and your button selector in the javascript should call the div ID which design, home, music not #btn_one,.. ,.. etc.
Hi, Thank you for the great example! Really appreciate the share.
Can you please advise if there is a way to remove the elastic effect? It can get nerve wrecking for some users.
Thank you!