Scrolling inside a div? scrollTo?

Question

I have a div container with a list in it, only one element of this list is displayed immediately, and the rest is hidden (the container has overflow: hidden).

I want jQuery to display the requested elements after clicking the exact links:

http://jsfiddle.net/ztFWv/

Any ideas? Will scrolling help me? I tried this plugin but no luck. I would prefer not to use iframe.

Answer 1

ScrollTo will help, but is scrolling absolutely necessary? I think it's even better to use slideUp() and slideDown()

I modified the HTML a bit to give the slide elements a class and an identifier.

Live Demo: http://jsfiddle.net/ztFWv/1/

 <div id="slider"> <ul> <li id="one" class="slideItem"> <h1>Header #1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p> </li> <li id="two" class="slideItem"> <h1>Header #2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p> </li> <li id="three" class="slideItem"> <h1>Header #3</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p> </li> </div> <a href="javascript:void(0);" class="one">Scroll to #1</a> <a href="javascript:void(0);" class="two">Scroll to #2</a> <a href="javascript:void(0);" class="three">Scroll to #3</a> 

Js

 $('a').click(function(){ var linkClass=$(this).attr('class'); $('.slideItem:visible').slideUp('fast',function(){ $('#' + linkClass).slideDown('fast'); }); }); 

UPDATE

If you must have scrolling :)

Here is an example: http://jsfiddle.net/ztFWv/3/

Include the scrollTo JS file and use this command this way.

 $('a').click(function(){ $('#slider').scrollTo( $('#' + $(this).attr('class')), 800 ); }); 

Answer 2

My favorite way to do this is to add the tabindex="0" attribute to the tag, and then call focus() on the element, which will cause the browser to scroll through it in the view.

It does not give you much control, but its natural scrolling and very smooth.

Answer 3

Yes, use the scrollTo jQuery plugin .

This is nothing to use. I myself used it for several projects.

There are other ways, such as TABS or hiding and displaying a div, with or without animation. I prefer this method because it looks more professional.

Answer 4

See the following:

How to scroll a window using jQuery $ .scrollTo () function

Answer 5

I play with scrolling, etc. for several hours today and came up with what, in my opinion, is a neat scroll frame without scroll bars, similar to what was suggested here. It scrolls vertically, either a “page” at a time, or a specific item (such as a DIV). It also scrolls horizontally, either a page at a time, or a specific item (for example, SPAN).

Look at the action in this fiddle

HTML example:

 <p> <h1>Vertical scrolling</h1> <button class="shift up" value="updown" >^</button> <button class="shift vertical" value="updown Av">A</button> <button class="shift vertical" value="updown Bv">B</button> <div id="updown"> <div id="Av"> AAAAAAA text AAAAAAA </div> <div id="Bv"> BBBBBBB text BBBBBBB </div> <div id="Cv"> CCCCCCC text CCCCCCC </div> <div id="Mv"> MMMMMMM text MMMMMMM </div> </div> <button class="shift down" value="updown" >v</button> <button class="shift vertical" value="updown Cv">C</button> <button class="shift vertical" value="updown Mv">M</button> </p> <p> <h1>Horizontal scrolling</h1> <button class="shift right" value="leftright" >&gt;</button> <button class="shift horizontal" value="leftright Ah">A</button> <button class="shift horizontal" value="leftright Bh">B</button> <div id="leftright"> <span id="Ah"> AAAAAAA text AAAAAAA </span> <span id="Bh"> BBBBBBB text BBBBBBB </span> <span id="Ch"> CCCCCCC text CCCCCCC </span> <span id="Mh"> MMMMMMM text MMMMMMM </span> </div> <button class="shift left" value="leftright">&lt;</button> <button class="shift horizontal" value="leftright Ch">C</button> <button class="shift horizontal" value="leftright Mh">M</button> </p> 

CSS:

 #updown, #leftright{ position: relative; overflow: hidden; line-height: 1.5em; height: 1.5em; width: 20em; border: 2px solid #000; } #updown div { position: absolute; height: 1.5em; width: 20em; margin: 0; padding: 0; border: 0; } #leftright span { position: absolute; display: inline; float: left; height: 1.5em; width: 20em; margin: 0; padding: 0; border: 0; } 

javascript:

 // See it in action at http://jsfiddle.net/Q7FFN/ $('#updown div').each(function(i){ // position the "divs" var $this = $(this); var amount = $this.parent().height(); $this.css({top: i * amount}); }); $('#leftright span').each(function(i){ // position the "spans" var $this = $(this); var amount = $this.parent().width(); $this.css({left: i * amount}); }); $('.shift').click(function(){ var $this = $(this); var value = $this.attr('value'); var values = value.split(/ +/); var items = '#' + values[0]; var item = (values.length == 2) ? '#' + values[1] : ''; var classes = $this.attr('class'); if (classes.match(/\bup\b/)) { // up - Use "match" instead of hasClass() for performance var amount =$(items).height(); $(items).children().animate({top: '-=' + amount}, 'slow'); } else if (classes.match(/\bdown\b/)) { // down var amount =$(items).height(); $(items).children().animate({top: '+=' + amount}, 'slow'); } else if (classes.match(/\bleft\b/)) { // left var amount = $(items).width(); $(items).children().animate({left: '-=' + amount}, 'slow'); } else if (classes.match(/\bright\b/)) { // right var amount = $(items).width(); $(items).children().animate({left: '+=' + amount}, 'slow'); } else if (classes.match(/\bvertical\b/)) { // vertical var amount = $(item).css('top'); console.log("amount=", amount); $(items).children().animate({top: '-=' + amount}, 'slow'); } else if (classes.match(/\bhorizontal\b/)) { // horizontal var amount = $(item).css('left'); $(items).children().animate({left: '-=' + amount}, 'slow'); } else { return false; } });