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

我想要这个效果：

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

页面的结构如下所示：

<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>

它工作得很好，但是当我再添加一个稍加修改的锚时（针对不同的锚

$）（'page3 a[href*=\\]：not（[href=\]]）。单击（function（）{

）并使用

左滚动：target.offset（）.left

（对于该水平滚动页面），它仅在出现溢出时才工作

---

我为每个页面设置了

overflow:hidden

，并将

overflow-x:scroll

滚动到应该水平滚动的特定页面（以删除网站上的空白）然后它就不起作用了。也许我应该针对不同的锚。它在Joomla。我想我已经很接近了，但还没弄明白。谢谢！

其他人已经帮你弄明白了。你想看看像Fullpage这样的插件：嗯，看起来不错。你不认为我需要改变很多东西，而不是改变我的一些代码吗现在有吗？像所有插件一样，你必须使用它的标记。但最终，它将为你节省大量时间并避免很多麻烦。我讨厌修改Joomla模板和模块中的标记。我真的不知道如何修改，因为那里的所有东西都是隐藏的。有没有解决方案按照我的要求来做呢？：）啊，我一点也不了解Joomla。我不使用这种东西（我讨厌Wordpress）正是因为你说：很多东西都是隐藏的，定制任何东西都是一场噩梦。所以我总是从零开始完全定制。

$(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;
      }
    }
  });
});