jQuery - слайд-страница по щелчку, если элемент не виден

Question

У меня есть выпадающий список jQuery для отображения div 500 в высоту. Проблема заключается в том, что ссылки для показа этого div находятся выше сгиба страницы, а выпадающий div, который исчезает, показывает под сгибом.

Я экспериментировал с scroll.to, чтобы переместить страницу вниз, если новый div не виден (но оставил пользователя там, где он есть, если он полностью виден) - к сожалению, безуспешно.

Исходный код (который работает хорошо, но, вероятно, может быть упрощен), выглядит так:

 // Homepage Theme Details Panel

 // Expand Panel

 $("#theme-1").click(function(){

   if ($("#theme-1-content").is(":hidden")) {

    if ($("#theme-details-wrap").is(":hidden")) {

     $("#theme-1-content").fadeIn(2000);

     $("#theme-details-wrap").slideDown(2000);

     $('#slider-content a#theme-1').addClass('theme-active');

    } else { // theme-details-wrap is open

     $("#theme-2-content").hide();
     $("#theme-3-content").hide();
     $("#theme-4-content").hide();
     $("#theme-5-content").hide();
     $("#theme-6-content").hide();

     $("#theme-1-content").fadeIn(2000);

     $('#slider-content a').removeClass('theme-active');
     $('#slider-content a#theme-1').addClass('theme-active');
     return false;

    }

   } else { // theme-1-content is shown so close

    $("#theme-details-wrap").slideUp(1000);
    $("#theme-1-content").fadeOut(1000);

    $('#slider-content a').removeClass('theme-active');

   }

 });

 $("#theme-2").click(function(){

   if ($("#theme-2-content").is(":hidden")) {

    if ($("#theme-details-wrap").is(":hidden")) {

     $("#theme-2-content").fadeIn(2000);

     $("#theme-details-wrap").slideDown(2000);

     $('#slider-content a#theme-2').addClass('theme-active');

    } else { // theme-details-wrap is open

     $("#theme-1-content").hide();
     $("#theme-3-content").hide();
     $("#theme-4-content").hide();
     $("#theme-5-content").hide();
     $("#theme-6-content").hide();

     $("#theme-2-content").fadeIn(2000);

     $('#slider-content a').removeClass('theme-active');
     $('#slider-content a#theme-2').addClass('theme-active');
     return false;

    }

   } else { // theme-2-content is shown so close

    $("#theme-details-wrap").slideUp(1000);
    $("#theme-2-content").fadeOut(1000);

    $('#slider-content a').removeClass('theme-active');

   }

 });

 $("#theme-3").click(function(){

   if ($("#theme-3-content").is(":hidden")) {

    if ($("#theme-details-wrap").is(":hidden")) {

     $("#theme-3-content").fadeIn(2000);

     $("#theme-details-wrap").slideDown(2000);

     $('#slider-content a#theme-3').addClass('theme-active');

    } else { // theme-details-wrap is open

     $("#theme-1-content").hide();
     $("#theme-2-content").hide();
     $("#theme-4-content").hide();
     $("#theme-5-content").hide();
     $("#theme-6-content").hide();

     $("#theme-3-content").fadeIn(2000);

     $('#slider-content a').removeClass('theme-active');
     $('#slider-content a#theme-3').addClass('theme-active');
     return false;

    }

   } else { // theme-3-content is shown so close


    $("#theme-details-wrap").slideUp(1000);
    $("#theme-3-content").fadeOut(1000);

    $('#slider-content a').removeClass('theme-active');

   }

 });

 $("#theme-4").click(function(){

   if ($("#theme-4-content").is(":hidden")) {

    if ($("#theme-details-wrap").is(":hidden")) {

     $("#theme-4-content").fadeIn(2000);

     $("#theme-details-wrap").slideDown(2000);

     $('#slider-content a#theme-4').addClass('theme-active');

    } else { // theme-details-wrap is open

     $("#theme-1-content").hide();
     $("#theme-2-content").hide();
     $("#theme-3-content").hide();
     $("#theme-5-content").hide();
     $("#theme-6-content").hide();

     $("#theme-4-content").fadeIn(2000);

     $('#slider-content a').removeClass('theme-active');
     $('#slider-content a#theme-4').addClass('theme-active');
     return false;

    }

   } else { // theme-4-content is shown so close

    $("#theme-details-wrap").slideUp(1000);
    $("#theme-4-content").fadeOut(1000);

    $('#slider-content a').removeClass('theme-active');

   }

 });

 $("#theme-5").click(function(){

   if ($("#theme-5-content").is(":hidden")) {

    if ($("#theme-details-wrap").is(":hidden")) {

     $("#theme-5-content").fadeIn(2000);

     $("#theme-details-wrap").slideDown(2000);

     $('#slider-content a#theme-5').addClass('theme-active');

    } else { // theme-details-wrap is open

     $("#theme-1-content").hide();
     $("#theme-2-content").hide();
     $("#theme-3-content").hide();
     $("#theme-4-content").hide();
     $("#theme-6-content").hide();

     $("#theme-5-content").fadeIn(2000);

     $('#slider-content a').removeClass('theme-active');
     $('#slider-content a#theme-5').addClass('theme-active');
     return false;

    }

   } else { // theme-5-content is shown so close


    $("#theme-details-wrap").slideUp(1000);
    $("#theme-5-content").fadeOut(1000);

    $('#slider-content a').removeClass('theme-active');

   }

 });

 $("#theme-6").click(function(){

   if ($("#theme-6-content").is(":hidden")) {

    if ($("#theme-details-wrap").is(":hidden")) {

     $("#theme-6-content").fadeIn(2000);

     $("#theme-details-wrap").slideDown(2000);

     $('#slider-content a#theme-6').addClass('theme-active');

    } else { // theme-details-wrap is open

     $("#theme-1-content").hide();
     $("#theme-2-content").hide();
     $("#theme-3-content").hide();
     $("#theme-4-content").hide();
     $("#theme-5-content").hide();

     $("#theme-6-content").fadeIn(2000);

     $('#slider-content a').removeClass('theme-active');
     $('#slider-content a#theme-6').addClass('theme-active');
     return false;

    }

   } else { // theme-6-content is shown so close

    $("#theme-details-wrap").slideUp(1000);
    $("#theme-6-content").fadeOut(1000);

    $('#slider-content a').removeClass('theme-active');

   }

 });

 // Collapse Button
 $(".collapse").click(function(){

  $("#theme-details-wrap").slideUp(1000);

  $("#theme-1-content").fadeOut(1000);
  $("#theme-2-content").fadeOut(1000);
  $("#theme-3-content").fadeOut(1000);
  $("#theme-4-content").fadeOut(1000);
  $("#theme-5-content").fadeOut(1000);
  $("#theme-6-content").fadeOut(1000);

  $('#slider-content a').removeClass('theme-active');
 });

});

Как я могу добавить код, чтобы отображать div # theme-details-wrap, если он не отображается?

Большое спасибо,

Джеймс

Answer 1

Какой плагин вы использовали для прокрутки окна браузера?

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Пример кода, прокручивающего окно браузера до соответствующего элемента:

$.scrollTo('#theme-details-wrap');

Если вы хотите проверить, видим ли элемент перед прокруткой окна, посмотрите код из этой темы:

Проверить, виден ли элемент после прокрутки

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

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

Answer 2

Эта функция:

    $.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
    }

Вызывается так:

$('#theme-details-wrap').scrollView();