Вот ваш проверенный ответ: http://jsfiddle.net/maniator/8fFVD/2/
(это со следующим и предыдущим, его можно расширить, чтобы выбрать абзац, который вы хотите просмотреть)
css:
#viewPort {
overflow: auto;
height: 200px;
width: 250px;
background: black;
color: white;
}
.data {
display: none;
}
html:
<div id="viewPort">
<div class='data'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin pulvinar dolor, vel dignissim velit porta nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer aliquam adipiscing odio, quis pellentesque nunc luctus vitae. Aenean dolor sem, tristique nec semper vel, ultricies eget sapien. Nulla nulla diam, euismod ut dapibus faucibus, porta eget nibh. Vivamus tempus ipsum quis metus lobortis in tempus est egestas. Nulla pretium ultricies dignissim. Nam tincidunt lorem vitae arcu placerat mollis. Pellentesque dictum justo ac mi viverra sit amet auctor massa sollicitudin. Suspendisse nisi nisi, varius ac ultricies vel, faucibus ut risus.
</div>
<div class='data'>
Nam eget magna lacus, ut accumsan elit. Sed accumsan tincidunt accumsan. Proin urna elit, porttitor sed elementum a, tempor vel nulla. Nulla sollicitudin elementum neque nec gravida. Duis vel auctor urna. Suspendisse vel nulla neque, at malesuada sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in metus in risus suscipit lobortis eget eu urna. Quisque et tortor at augue varius cursus. Sed molestie sem eu justo porta aliquam. Donec libero dolor, aliquam euismod egestas ac, venenatis ac nulla. Suspendisse potenti. Aenean tortor orci, malesuada id pulvinar et, consequat ut lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel lacus erat, ultrices volutpat libero. Suspendisse mi magna, placerat quis ultrices et, condimentum vitae nisi. Aenean tellus tortor, dignissim nec facilisis a, tempus vel arcu. Cras lacinia porta rhoncus. Cras vel nunc eget felis varius gravida in in eros.
</div>
<div class='data'>
Aenean facilisis, nisi et sodales iaculis, purus enim eleifend ante, quis cursus justo elit ut ligula. In eleifend turpis tellus, nec mollis dolor. Nunc blandit tellus nec nunc consequat a bibendum mi aliquet. Sed et velit id mauris malesuada blandit. Pellentesque commodo metus vel magna bibendum at volutpat turpis placerat. Aenean rutrum molestie velit, eu consectetur tellus placerat vitae. Morbi nisi dolor, tempus convallis sagittis at, aliquet in justo. Proin nec elit faucibus metus interdum commodo. Ut in vulputate est. Proin malesuada elit eget libero adipiscing eu tempus mi malesuada. Mauris consectetur elit vitae velit mattis tristique. Quisque sed ipsum sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse posuere dui vel lacus tempor tincidunt. Ut enim mi, aliquet sit amet fermentum non, volutpat in tortor. Nulla sed nisl tellus, eget imperdiet libero.
</div>
</div>
<span class='n'>NEXT</span><br/><span class='p'>PREV</span>
и, наконец, js:
var index = 0;
var columns = $('.data');
columns.eq(index).show()
$('.n').click(function(){
columns.eq(index).hide()
index++;
if(index+1 > $('.data').length) index = 0;
columns.eq(index).show()
})
$('.p').click(function(){
columns.eq(index).hide()
index--;
if(index < 0) index = columns.length -1;
columns.eq(index).show()
})