Question

我正在尝试基于此水平滚动方法Responsive horizontal page sliding

创建网站

我希望导航栏在第一页上垂直居中，但在其他页面上移动到顶部。

我有这个工作，但我希望导航栏动画并在单击另一个页面时平滑滚动到顶部。我试过这个

  $('.navbar').animate({scrollTop:50},500);

但没有任何改变。我知道它的代码不错，因为它没有破坏我的jquery函数，但我也知道它不正确，因为它不起作用。

有没有人知道如何实现这一目标？

所有输入都非常感谢

继承代码以匹配jsfiddle

HTML

<div class="wrapper">
 <div class="nav">
     <a href="#page-1" class="scrollitem selected">page 1</a>
     <a href="#page-2" class="scrollitem">page 2</a>
     <a href="#page-3" class="scrollitem">page 3</a>
 </div>
 <div id="page-1" class="page"> 
     <h3>page 1</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
 </div>
 <div id="page-2" class="page">  
     <h3>page 2</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
 </div>
 <div id="page-3" class="page"> 
    <h3>page 3</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
 </div>
</div>

JS

$(document).ready(function () {
 var sildeNum = $('.page').length,
    wrapperWidth = 100 * sildeNum,
    slideWidth = 100/sildeNum;
 $('.wrapper').width(wrapperWidth + '%'); 
 $('.page').width(slideWidth + '%');

 $('a.scrollitem').click(function(){
    $('a.scrollitem').removeClass('selected');
    $(this).addClass('selected');

    var slideNumber = $($(this).attr('href')).index('.page'),
        margin = slideNumber * -100 + '%';

    $('.wrapper').animate({marginLeft: margin},1000);

    if(slideNumber=='0'){
            $('.nav').css('position','absolute');
            $('.nav').css('top','30%');
        }else{
            $('.nav').css('position','absolute');
            $('.nav').css('top','0px');
            $('.nav').animate({scrollTop:50},500);
        }
    return false;
 });
});

CSS

html, body {
height: 100%;
margin: 0;
overflow-x:hidden;
position:relative;
}

.wrapper {
height: 100%;
background: #263729;
}
.page {
float:left;
background: #992213;
min-height: 100%;
padding-top: 30px;
}
.simulate{
 height:2000px;
 }

.nav{
 position:absolute;
 top:30%;
 z-index:999;
 left:0;
 width:100%;
 background-color:#CCCCCC;
 height:85px;
}

Answer 1

只需使用animate()代替css()：

if (slideNumber == '0') {
  $('.nav').animate({
    'top': '30%'
  });
} else {
  $('.nav').animate({
    'top': '0'
  });
}

如何让我的导航栏在页面点击上顺利滚动到顶部

1 个答案:

DemoFiddle