scrollLeft animate (jQuery)

Для плавной прокрутки скролла по горизонтали какого-либо элемента в jQuery используется функция .animate(properties [, duration] [, easing] [, complete]).

Пример

Например есть <div> с горизонтальной прокруткой и кнопка при нажатии на которую нужно плавно прокрутить скролл на 100 пикселей.

Смотреть онлайн-пример.

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>scrollLeft animate (jQuery)</title> <style type="text/css"> .main {width:600px; height:220px; overflow:auto; border:#CCC 1px solid;} .inner {height:200px; width:1000px;} </style> <script type="text/javascript" src="/js/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#btn').click(function(){ $('#main').animate({ scrollLeft: '+=100', }, 1000, function() { //код по завершении анимации }); }); $('#reset').click(function(){ $('#main').animate({ scrollLeft: '0px', }, 'slow', function() { //код по завершении анимации }); }); }); </script> </head><body> <div id="main" class="main"><div class="inner">Но чтобы вы поняли, откуда возникает это превратное представление людей, порицающих наслаждение и восхваляющих страдания, я раскрою перед вами всю картину и разъясню, что именно говорил этот человек, открывший истину, которого я бы назвал зодчим счастливой жизни. Действительно, никто не отвергает, не презирает, не избегает наслаждений только из-за того, что это наслаждения, но лишь из-за того, что тех, кто не умеет разумно предаваться наслаждениям, постигают великие страдания. Равно как нет никого, кто возлюбил бы, предпочел и возжаждал бы само страдание только за то, что это страдание, а не потому, что иной раз возникают такие обстоятельства, когда страдания и боль приносят некое и немалое наслаждение. Если воспользоваться простейшим примером, то кто из нас стал бы заниматься какими бы то ни было тягостными физическими упражнениями, если бы это не приносило с собой некоей пользы? И кто мог бы по справедливости упрекнуть стремящегося к наслаждению, которое не несло бы с собой никаких неприятностей, или того, кто избегал бы такого страдания, которое не приносило бы с собой никакого наслаждения?</div></div> <br><input type="button" id="btn" value="Плавно проскроллить на 100 пикселей"> <input type="button" value="В начало" id="reset"> </body></html>

Категории

ПрограммированиеJavaScriptБиблиотекиjQuery

Читайте также

Комментарии