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

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

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

Accordian окно выглядит следующим образом:

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

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

источник

2010-07-27 Thomas

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

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

источник

2010-07-27 18:54:47 peol

Я думал об этом, но контент динамичен, поэтому я не уверен, что будет. – Thomas

У вас должна быть ссылка на желаемый элемент, поэтому вы можете использовать $ (window) .scrollTop ($ (wantedelement) .offset(). Top) - Если я не ошибаюсь. – peol

Итак, я установил его так: $ (document) .ready (function() { $ (".btn-slide"). Click (function() { $ (window) .scrollTop ($ («#no»). offset(). top) }); }); #no - это самое дно моей панели аккордеона. Кажется, это не срабатывает. Правильно ли я настроил его? – Thomas

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

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

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

источник

2010-07-27 18:46:37 ScottE

Да, это именно то, что я ищу. Меня не волнует анимация, мне просто нужно спуститься туда, когда аккордеон срабатывает. Я бы хотел, однако, избегать использования дополнительного плагина. – Thomas

Хитрость заключается в использовании внешнего контейнера-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>

источник

2010-07-27 20:26:09 fishbone

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

ответ

Смежные вопросы