JQuery показать скрытый контент, а затем автоматически прокрутить до середины контента - PullRequest
Новая
       21

JQuery показать скрытый контент, а затем автоматически прокрутить до середины контента

2 голосов
/ 07 августа 2011

У меня есть кнопка, которая при нажатии расширяет страницу. Вот код: 

/*Source:http://rpardz.com/blog/show-hide-content-jquery-tutorial*/

jQuery('.open-content').hide().before('<div class="container_12"><a href="#" id="toggle-content" class="button"><div id="expand-button" ></div></a></div><div id="toggle-top" style="width:100%"></div>');
jQuery('a#toggle-content').click(function() {
    jQuery('.open-content').slideToggle(1000);
    return false;
});

Работает хорошо, как вы можете видеть: Скрыто: http://cl.ly/101v0N0W1z2D2e0x3a0j Расширено: http://cl.ly/1Z2Q1d3Y2z2X3G1j1v2G

Обратите внимание (см. Прокрутку на стороне изображений), как нижняя часть страницы расширяется, чтобы показать больше контента; я не могу понять, как сделать так, чтобы страница автоматически прокручивалась до нижней части видимого контента после того, как страница закончила расширяться ..

Я использую этот стандартный скрипт для плавной прокрутки к местам на странице .. 

/*Source: http://goo.gl/DaRfF */
jQuery(document).ready(function($) {

$(".scroll").click(function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

});

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

1 Ответ

1 голос
/ 07 августа 2011

как насчет этого? 

jQuery('.open-content').slideToggle(1000, function(){
   var offset = jQuery('.open-content').offset();
   var y = offset.top + jQuery('.open-content').height();
   var wheight = $(window).height()
   var scroll = y - wheight;
   $(document).animate({scrollTop:scroll}, 500);
});
...