jQuery水平滚动到DIV点击

Question

我有一个视差设置，因此用户可以在网站着陆时向下滚动。一旦他们向下滚动，他们就可以滚动到不同的页面。

我尝试过使用jQuery代码：

$("#scrollTo").click(function() {
$('html, body').animate({
    scrollTop: $("#page2").offset().top
}, 2000);

}）;

我想这样做，当用户点击它滚动的按钮或横向滚动到第二页“view2”。但是系统似乎不起作用。

这是一个小提琴：https://jsfiddle.net/qm7s60ud/1/

Answer 1

animate应该在.wrapper类上，因为它是有溢出的元素。

.wrapper { 
    height: 100%;
    background-color: gray;
    overflow: auto; //overflow that causes the div to have scroll bar
}

而不是scrollTop和.offset().top，（因为这是针对垂直）

应该是 scrollLeft和.offset().left ..（这是针对水平）

WORKING DEMO

Answer 2

使用此

var top_value=$("#page2").position().top
    $('html, body').animate({scrollTop: '+='+top_value},2000);

我们在变量top_value中得到div page2的顶部像素值，然后向下滚动到该像素