在一页jquery上进行垂直和水平滚动

Question

我想要这个效果：

（蓝色是用户可见的部分）

页面结构如下所示：

<div id="page1"></div>
<div id="page2"></div>
<div id="page3">
 <div id="page3-1"></div>
 <div id="page3-2"></div>
 <div id="page3-3"></div>
</div>
<div id="page4"></div>

我想让左边的点数让我点击滚动到网站的某个点。我找到了这个很好的功能：

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

它工作得很好，但是当我添加一个稍微修改（针对不同的锚点$('#page3 a[href*=#]:not([href=#])').click(function() {）和scrollLeft: target.offset().left（对于那个水平滚动页面）时，它只有在有溢出时才有效。

我为每个页面overflow: hidden和overflow-x: scroll到了应该水平滚动的某个页面（以删除网站上的空白区域）然后它不起作用。也许我应该针对不同的锚点。它在Joomla。我想我很亲密，但无法弄清楚。谢谢！