Выделите Дивы щелкать на DIV

Question

Вот скрипка ссылки https://jsfiddle.net/hitech0101/5vhdm5hy/

$('.block').click(function() { 
    $('#mainContainer').animate({'width':'20%'}, 1000); 
    $(this).css({'background-color':'blue'}); 
    $('.block').css({'display':'block','width':'100%'}); 
    $('.second').css({'display':'inline-block'}) 
    }); 

В скрипке, я использую JQuery, чтобы преобразовать горизонтальные блоки в вертикальные блоки. Я изменил цвет блока с красного на синий, когда щелкнул блок. Когда я нажимаю на конкретный блок, я бы прокрутил, чтобы перейти к местоположению блока в вертикальном представлении. Я попробовал метод scrollTop() jquery, но все равно не мог заставить его работать так, как я этого хотел. Пожалуйста помоги.

Скрипка - это частичное представление веб-страницы, над которой я работаю. На исходной странице есть больше контента, который я исключил. Основной контейнер - второй контейнер на странице.

Answer 1

$(this).get(0).scrollIntoView(); 

Добавить эту строку в функцию .click.

Fiddle

Answer 2

Я предлагаю вам получить смещение верхнего значения и анимировать #maincontainer в этой позиции

$('.block').click(function() { 
    $('#mainContainer').animate({'width':'20%'}, 1000); 
    $(this).css({'background-color':'blue'}); 
    $('.block').css({'display':'block','width':'100%'}); 
    $('.second').css({'display':'inline-block'}); 
    /*below is what i was talking about*/ 
    var pos = $(this).offset(); 
    $('#mainContainer').animate({ scrollTop: pos.top }); 

}); 

Answer 3

$(document).on("click", ".block", function() { 
    var _body_html = $('html, body'); 
    var _scroll_to = $('.scroll-to'); 
    var _top = _scroll_to.offset().top; 
    _body_html.animate({ 
     scrollTop: _top 
    }, 1000); 
    setTimeout(function() { 
     _body_html.finish(); 
    }, 1000); 
}); 

Answer 4

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

Оберните div в якорь или просто используйте сам якорь, они оба обертки.

<a href="#scrollToMe"> 
    <div id="scrollToMe"></div> 
</a> 

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