Question

我们构建了一个带有动画收藏效果的居中水平网页布局。我们有5个菜单，使用简单的锚点在不同的页面之间导航。由于除了body（内容）区域之外，所有页面都是静态的，因此我们只是在特定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 overflow：display;在#body ID中再次运行小提琴以查看正常的div，其中包含5个下一个到一个div。

好的，谢谢你的帮助。

Answer 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
中一切正常

居中的水平网页布局，带有动画滚动效果

1 个答案: