滚动到该DIV点击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来水平块转换成垂直块。当单击该块时，我已将块的颜色从红色更改为蓝色。当我点击一个特定的块时，我将滚动到垂直视图中块的位置。我试过jQuery的scrollTop（）方法，但仍然无法按照我希望的方式工作。请帮忙。

小提琴是我工作的网页的部分代表。我已经排除了原始页面上的更多内容。主容器是页面上的第二个容器。

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> 

只要记住，它只能元素滚动到视图在力所能及的范围内，如果该项目是在父元素滚动将见底的底部，这将不能够再往前走。