Presentations w/ JQuery Horizontal Scrolling

A Client wanted me to create an e-Learning Website, and one of the feature of the website is Quiz. I figured that a horizontal scrolling animation will adds a wonderful user-experience to the quiz, and it looks nice as a presentation as well!

DEMO : CLICK
DEMO SOURCE : CLICK

Christophe Verbinnen created a wonderful function to do the scrolling here :  http://djpate.com/2009/10/07/animated-scroll-to-anchorid-function-with-jquery/ . But unfortunately, that function couldn’t handle  horizontal scrolling so I modified it a little.

The Jquery Function to do the effect :

function goToByScroll(id){
$('html,body').animate({scrollLeft: $("#"+id).offset().left},'slow');
}

To call it, use:

goToByScroll('IdOfTheTarget')

An example of calling the function with a link :

<a onclick="goToByScroll('wrap1')" href="#">Slide 1</a>

*About The Author: Yohanes Steven is a Web Designer with a passion in coffee. He survived cancer in December 2010 and have intended to inspire the world ever since

Comments

  1. Parnellk1

    Hi thanks for the code. I have seen it be done before and it makes a site look great. I have a problem. I am bran new to JQuery. I am working in Dreamweaver and I don’t know where to put the code at? This might be a stupid question but does the first part of the code go into my css and the second in my source code? Thanks!

    1. Yohanes Steven

      Hi, there! Thanks before for your question.

      So, the basic idea is that you need to treat  JQuery the same way you treated Javascript. So you can put your Jquery codes inside like this :    JQUERY CODES HERE

      You can put that tag anywhere in your source code. No need to worry about the CSS. 🙂

      Hope that helps!

  2. Sujata

    very nice tutorial but i want vertical animation rather than horizontal.. can you tel me how can i modify this java script to work vertically

Leave a Reply

Your email address will not be published. Required fields are marked *