上周我们刚刚推出了一个新版本的网站,用JavaScript滚动。 你可以看到它住在http://beebole.com但我已经提取的代码下面一个基本的例子:
<html lang="en">
<head>
<title>BeeBole - Simple and Fast Timesheets</title>
<style>
body{ padding:0 1em; margin:0;}
ul{ padding:0;margin:0;}
li{ list-style:none; float:left; margin:0 1em;}
h1{ clear:both;}
</style>
</head>
<body>
<a id="home" name="home"></a>
<div class="header">
<ul class="menu">
<li><a class="fr current" href="#home" onclick="return beebole.scrollTo(this)">Home</a>
<li><a class="fr" href="#pricing" onclick="return beebole.scrollTo(this)">Pricing</a>
<li><a class="fr" href="#tour" onclick="return beebole.scrollTo(this)">Tour</a>
</ul>
</div>
<div class="chapter home">
<h1>Home</h1>
<p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>
</div>
<a id="pricing" name="pricing"></a>
<div class="header">
<ul class="menu">
<li><a class="fr" href="#home" onclick="return beebole.scrollTo(this)">Home</a>
<li><a class="current fr" href="#pricing" onclick="return beebole.scrollTo(this)">Pricing</a>
<li><a class="fr" href="#tour" onclick="return beebole.scrollTo(this)">Tour</a>
</ul>
</div>
<div class="chapter pricing">
<h1>Pricing</h1>
<p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>
<p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>
</div>
<a id="tour" name="tour"></a>
<div class="header">
<ul class="menu">
<li><a class="fr" href="#home" onclick="return beebole.scrollTo(this)">Home</a>
<li><a class="fr" href="#pricing" onclick="return beebole.scrollTo(this)">Pricing</a>
<li><a class="current fr" href="#tour" onclick="return beebole.scrollTo(this)">Tour</a>
</ul>
</div>
<div class="chapter tour">
<h1>Take a tour</h1>
<p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>
<p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>
<p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p>
</div>
<script>
(function(){
window.beebole = {
getPos: function(elm){
var x = 0, y = 0;
while(elm != null) {
x += elm.offsetLeft;
y += elm.offsetTop;
elm = elm.offsetParent ;
}
return {x:x, y:y};
},
damper:function(rfnAction, rfnDone, duration){
var interval,
startTime = new Date().getTime();
interval = setInterval(function(){
var pos,
t,
now = new Date().getTime();
t = now - startTime;
if(t >= duration){
clearInterval(interval);
rfnDone.call(beebole);
}else{
t = 2 * t/duration;
if (t < 1) {
pos = 0.5*t*t*t*t;
}else{
t -= 2;
pos = -0.5 * (t*t*t*t - 2);
}
rfnAction.call(beebole, pos);
}
}, 15);
},
scrollTo: function(a){
try{
var endName = a.href.split('#')[1],
endElm = document.getElementById(endName),
start = isNaN(window.pageYOffset) ?
document.documentElement.scrollTop :
window.pageYOffset,
end = beebole.getPos(endElm).y,
length = beebole.getPos(endElm).y - start;
this.damper(function(pos){
//when moving
window.scrollTo(0, start + length * pos);
}, function(){
//when done
window.location.hash = endName;
},
//duration
Math.max(Math.abs(Math.round(length/3)), 1200));
return false;
}catch(e){
return true;
}
}
};
})();
</script>
</body>
</html>
要么添加更多的内容,其中lorem ipsum
是。或者使浏览器窗口非常小以进行滚动。
点击链接查看页面移动。
如果浏览器关闭了Javascript,浏览器将使用默认的#键负责滚动。但显然没有阻尼效应。 它没有在IE6和IE7上测试过。
来源
2011-05-12 23:40:54
Mic
尼斯宽松实施 – mVChr 2011-05-12 23:49:57