具有动画滚动效果的居中水平网页布局答案

【问题标题】：Centered horizontal web layout with animated scrolling effect具有动画滚动效果的居中水平网页布局
【发布时间】：2013-10-27 16:20:44
【问题描述】：

我们构建了具有动画 scolling 效果的居中水平网页布局。我们有 5 个菜单，它们使用简单的锚点在不同页面之间导航。由于除了正文（内容）区域外，所有页面都是静态的，因此我们只需将锚点定位在特定 DIV 中。所以这不是滑动的所有页面，而只是内容部分。研究的效果是从一页到另一页的流畅滚动。如果我们单击第一个菜单项，然后单击最后一个菜单项（第 5 个），则所有页面一个接一个地滑动直到最后一个......到目前为止一切都很好。

我们从其他网站（一些 css 部分）和小 jquery 部分获取了示例代码。但是当我们点击某个菜单时，有时它不会做任何事情，有时不会显示好的幻灯片，最后，不会在好的方向上滑动（会向相反的方向滑动），我们被困在这部分.

HTML

<body>
    <div id="menu">
        <ul>
            <li><a href="#menu1">Page 1</a></li>
            <li><a href="#menu2">Page 2</a></li>
            <li><a href="#menu3">Page 3</a></li>
            <li><a href="#menu4">Page 4</a></li>
            <li><a href="#menu5">Page 5</a></li>
        </ul>
     </div>


    <div align="center" id="body">
      <div id="body_wrapper">
        <div class="body_content_content" id="menu1">menu1 page content</div>
        <div class="body_content_content" id="menu2">menu2 page content</div>
        <div class="body_content_content" id="menu3">menu3 page content</div>
        <div class="body_content_content" id="menu4">menu4 page content</div>
        <div class="body_content_content" id="menu5">menu5 page content</div>
      </div>
    </div>

</body>

CSS

#menu ul li {
 display:inline;   
}

#body {
  width:100%;
  height:200px;
  margin:auto;
  position:relative;
  border: 0px solid red;
  overflow:hidden;
  top:100px;
}

#body_wrapper {
  float:left;
  width:500%;
  padding:0;
  margin:0;
  height: 200px;
}

.body_content_content {
  float:left;
  width:20%;
  height:200px;
  #margin:10px 0;
  position:relative;
}

.body_content_content div:first {
  width:900px;
  padding:20px;
  margin:auto;
  float:none;   
}

JQUERY

$('a[href^="#"]').on('click',function(event){
      var $anchor = $(this);

      $('#body').stop().animate({
          scrollLeft: $($anchor.attr('href')).offset().left
      }, 1000);

      event.preventDefault();
  });

>> See the Web site

>> Here's a fiddle

在小提琴中，您可以设置 CSS 溢出：显示；在#body ID 中并再次运行 fiddle 以查看一个普通的 div，其中包含 5 个相邻的一对一 div。

好的，谢谢你的帮助。

【问题讨论】：

不错的网站，但我看到了问题。这很奇怪，因为它似乎应该起作用。
这可能会有所帮助（W3C 验证）：validator.w3.org/…

标签： jquery css layout web horizontal-scrolling

【解决方案1】：

终于有了一个简单的jquery插件Jquery.LocalScroll，而且很容易实现

您可以在此处查看作者 plugin site 和 demo 的完整详细信息，我们可以同时滚动“X”、“Y”甚至两者。

CSS / HTML 并没有简单地改变看起来像这样的 JavaScript JQuery 块：

$.localScroll.defaults.axis = 'xy';

// Scroll initially if there's a hash (#something) in the url 
$.localScroll.hash({
    target: '#content', // Could be a selector or a jQuery object too.
    queue:true,
    duration:1500
});

$.localScroll({
    target: '#body', // could be a selector or a jQuery object too.
    queue:true,
    duration:1000,
    hash:true,
    onBefore:function( e, anchor, $target ){
        // The 'this' is the settings object, can be modified
    },
    onAfter:function( anchor, settings ){
        // The 'this' contains the scrolled element (#content)
    }
});

另外，您必须添加 demo 中包含的 jquery.scrollTo-min.js 和 jquery.localscroll-min.js强>。

现在在 my solution

中一切正常

【讨论】：