Автоматически прокручивать вниз с помощью Jquery? - PullRequest
Новая
       2

Автоматически прокручивать вниз с помощью Jquery?

0 голосов
/ 27 июля 2010

У меня есть модальная коробка с определенной высотой. Внутри этого окна есть поле для аккордеона, которое открывается, когда пользователь нажимает на ссылку. Высота аккордеонной рамки при ее переключении превышает высоту модальной рамки, и, таким образом, появляется полоса прокрутки.

Я бы хотел автоматически прокрутить полоски до самой нижней точки, чтобы отобразить новый контент в поле аккордеона.

Аккордеонная коробка выглядит так: 

<script type="text/javascript"> 
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>

Есть ли способ интегрировать эту функцию прокрутки вниз в существующую функцию? Существует ли существующая функция Jquery для этого типа поведения?

Ответы [ 3 ]

2 голосов
/ 27 июля 2010

Если я понимаю, что вы ищете ...

Если вам нужна хорошая плавная прокрутка, тогда плагин scollTo - отличный выбор.

Если вам все равно, просто используйте хеш.location.hash = '#someid';

1 голос
/ 27 июля 2010

Если вы не хотите полагаться на какой-либо плагин или изменять фактический URL, вы можете использовать scrollTop, см. http://api.jquery.com/scrollTop/

Приветствие.

0 голосов
/ 28 июля 2010

Хитрость заключается в том, чтобы использовать внешний контейнер-div, который можно прокручивать. Это позволяет узнать размер внутреннего div, который содержит фактическое содержимое.
Мое решение (Вы должны сделать некоторые корректировки для своего аккордеона): 


<html>
   <head>
      <style>
         #container {
            overflow-y: scroll;
            height: 200px; /* defined height */
         }
      </style>
   </head>
   <body>
      <div id="container">
         <div id="content">
            <!-- dynamic content -->
         </div>
      </div>
   </body>
   <script type="text/javascript" src="http://jquery.com/src/jquery-latest.js" ></script>
   <script type="text/javascript">
      function onNewContent() {
         $("#container").scrollTop($("#content").height());
      }

      //test
      $(document).ready(function() {
         for(var i = 0; i < 500; ++i)
            $("#content").append($("<div/>").html(i));
         onNewContent();
      });
   </script>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...