我怎样才能让我的导航栏在页面点击时平滑地滚动到顶部
how can I make my navbar scroll smoothly to the top on page click
我正在尝试基于这种水平滚动方法创建网站Responsive horizontal page sliding
我希望导航栏在第一页上垂直居中,但在其他页面上移动到顶部。
示例:http://jsfiddle.net/wtvaJ/26/
我有这个工作,但我希望导航栏在单击另一个页面时动画并平滑地滚动到顶部。
我试过这样做
$('.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;
}
只需使用 animate()
而不是 css()
:
if (slideNumber == '0') {
$('.nav').animate({
'top': '30%'
});
} else {
$('.nav').animate({
'top': '0'
});
}
DemoFiddle
我正在尝试基于这种水平滚动方法创建网站Responsive horizontal page sliding
我希望导航栏在第一页上垂直居中,但在其他页面上移动到顶部。
示例:http://jsfiddle.net/wtvaJ/26/
我有这个工作,但我希望导航栏在单击另一个页面时动画并平滑地滚动到顶部。 我试过这样做
$('.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;
}
只需使用 animate()
而不是 css()
:
if (slideNumber == '0') {
$('.nav').animate({
'top': '30%'
});
} else {
$('.nav').animate({
'top': '0'
});
}