В итоге написал свое решение, задача немного конкретизировалась и это по большей части для фотогалереи. Все блоки элементов(фотографий например) имеют фиксированную величину, которая указывается в скрипте. Это необходимо знать, чтобы вовремя убирать кнопки прокрутки. Дольше всего пришлось помучиться с кроссбраузерностью, но терь все работает. Вот, может кому пригодится.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> <style type="text/css"> .up-but { cursor: pointer; height: 20px; width: 47px; visibility: hidden; background: url('up-but.gif') no-repeat; margin-left: 67px; } .down-but { cursor: pointer; height: 20px; visibility: hidden; width: 47px; background: url('down-but.gif') no-repeat; margin-left: 67px; } .gallery { width: 185px; height: 320px; border: 2px solid black; overflow: hidden; position: relative; } .scroll { position: relative; top: 0; } </style> <script type="text/javascript"> $(document).ready(function(){ var item_height=105; var scroll_speed=600; var item_num=0; var cont_height=parseFloat($(".gallery").css("height")); $(".gallery .scroll div").each(function() {item_num++;}); all_item_height=item_height*item_num; var dif=all_item_height-cont_height; if (dif > 0) $(".down-but").css("visibility", "visible"); $(".down-but").click(function(){ $(".scroll").animate({top: "-="+item_height}, scroll_speed); $(".up-but").css("visibility", "visible"); dif=dif-item_height; if (dif<0) $(".down-but").css("visibility", "hidden"); return false; }); $(".up-but").click(function(){ $(".down-but").css("visibility", "visible"); $(".scroll").animate({top: "+="+item_height}, scroll_speed); dif=dif+item_height; if (dif+1 > all_item_height-cont_height) $(".up-but").css("visibility", "hidden"); return false; }); }); </script> </head> <body> <div class="up-but">Вверх</div> <div class="gallery"> <div class="scroll"> <div style="margin-top: 5px; background: #ededed; height: 100px; width: 180px">Блок1</div> <div style="margin-top: 5px; background: #ededed; height: 100px; width: 180px">Блок2</div> <div style="margin-top: 5px; background: #ededed; height: 100px; width: 180px">Блок3</div> <div style="margin-top: 5px; background: #ededed; height: 100px; width: 180px">Блок4</div> <div style="margin-top: 5px; background: #ededed; height: 100px; width: 180px">Блок5</div> <div style="margin-top: 5px; background: #ededed; height: 100px; width: 180px">Блок6</div> <div style="margin-top: 5px; background: #ededed; height: 100px; width: 180px">Блок7</div> </div> </div> <div class="down-but">Вниз</div> </body> </html>
