Question

我正在使用jQuery UI手风琴，我只是想知道是否可以将其配置为滚动到活动div的开头 - 因为我正在使用相当多的内容，并且在他们打开的那一刻，但用户必须向上滚动才能看到内容。

<div class="accordion">
    <h3>Section Title</h3>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur ipsum vel nibh iaculis, sit amet euismod felis tincidunt. Donec pretium pulvinar condimentum. Donec sit amet placerat turpis. Sed vel lacus lectus. Suspendisse sodales odio eu libero eleifend porta. Pellentesque auctor, orci ut rhoncus ornare, felis sem lacinia arcu, in pellentesque sapien lorem faucibus metus. Mauris felis metus, convallis sed volutpat eu, posuere non elit. Fusce consequat ipsum turpis, ac convallis nisi ultricies eu. Phasellus vehicula justo augue, et pellentesque odio porta at. Phasellus tincidunt vitae velit in pellentesque. Ut venenatis blandit quam, at gravida erat ullamcorper at. Sed varius eleifend ligula et eleifend. Sed tristique tortor ipsum, eu laoreet nunc euismod in. Phasellus egestas nibh non semper condimentum. Praesent pellentesque leo et turpis fermentum, vitae eleifend velit rutrum. Quisque et nunc at odio accumsan sodales.</p>
        <p>Aliquam enim enim, rhoncus sed malesuada at, interdum pulvinar massa. Vestibulum eget felis diam. Nunc gravida massa quam, in suscipit diam congue ut. Pellentesque quis nunc vitae lectus adipiscing porttitor. Phasellus eget iaculis enim. Nulla sed augue pretium, tempus ipsum ut, sodales metus. Donec faucibus varius neque vitae gravida.</p>
    </div>
    <h3>Section Title 2</h3>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur ipsum vel nibh iaculis, sit amet euismod felis tincidunt. Donec pretium pulvinar condimentum. Donec sit amet placerat turpis. Sed vel lacus lectus. Suspendisse sodales odio eu libero eleifend porta. Pellentesque auctor, orci ut rhoncus ornare, felis sem lacinia arcu, in pellentesque sapien lorem faucibus metus. Mauris felis metus, convallis sed volutpat eu, posuere non elit. Fusce consequat ipsum turpis, ac convallis nisi ultricies eu. Phasellus vehicula justo augue, et pellentesque odio porta at. Phasellus tincidunt vitae velit in pellentesque. Ut venenatis blandit quam, at gravida erat ullamcorper at. Sed varius eleifend ligula et eleifend. Sed tristique tortor ipsum, eu laoreet nunc euismod in. Phasellus egestas nibh non semper condimentum. Praesent pellentesque leo et turpis fermentum, vitae eleifend velit rutrum. Quisque et nunc at odio accumsan sodales.</p>
        <p>Aliquam enim enim, rhoncus sed malesuada at, interdum pulvinar massa. Vestibulum eget felis diam. Nunc gravida massa quam, in suscipit diam congue ut. Pellentesque quis nunc vitae lectus adipiscing porttitor. Phasellus eget iaculis enim. Nulla sed augue pretium, tempus ipsum ut, sodales metus. Donec faucibus varius neque vitae gravida.</p>
    </div>
</div>

http://jsfiddle.net/nQgXC/2/

Answer 1

以下是我使用scrollTop和jQuery手风琴activate事件提出的问题。

$(function() {
   $( ".accordion" ).accordion({
      activate: function(event, ui){
           var scrollTimer = (Math.abs(($('body').scrollTop()-ui.newPanel.offset().top-45)/100));
           $('html, body').animate({
              scrollTop: ui.newPanel.offset().top-45
           }, scrollTimer*400);
      }
  });
});

http://jsfiddle.net/nQgXC/7/

jQuery UI手风琴滚动到活动部分

1 个答案: