滚动使用JavaScript的网页 [英] Scroll a page using JavaScript
问题描述
我使用 Ender.js ，我试图让页面滚动到特定位置。
我想我在这里做得不对，但页面不挪步。理想我也喜欢使用动画事件，但埃米尔不接受scrollTop的作为参数。
任何帮助是AP preciated。
I'm using Ender.js and I am trying to get the page to scroll to a specific position. I think I'm doing something wrong here, but page doesn't even move. Ideally I would have liked to use an animate event but emile doesn't accept scrollTop as a parameter. Any help is appreciated.
$.domReady(function () {
function startPageScroll(finalPos){
var scrollAmount = 0;
var id = setInterval(function(){
if(scrollAmount < finalPos){
$('body,html').scroll(0,50);
scrollAmount+=50;
}
else{clearInterval(id);}
},100);
}
$('a.back-to-top-link').each(function(element) {
var link = $(element);
var target = link.attr("href");
var position = $(target).offset().top;
link.on('click', function(event) {
event.preventDefault();
startPageScroll(position);
});
});
});
我的版本包括：
- domready@0.1.0
- scriptjs@2.1.1
- qwery@1.1.6
- bonzo@0.4.5
- bean@0.1.5
- emile@1.0.4
推荐答案
我们刚刚推出了我们的网站的新版本上周，有一个JavaScript滚动。
你能活着看到它在 http://beebole.com 但我已经提取的code为一个基本的例子如下：
We just rolled out a new version of our web site last week, with a Javascript scrolling. You can see it live at http://beebole.com but I've extracted the code for a basic example below:
<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存有是。或使浏览器窗口很少有一个卷轴。
Either add more content where the lorem ipsum are. Or make the browser window very small to have a scroll.
点击链接查看的页面的举动。
Click the links to see the page move.
如果浏览器的Javascript已关闭，浏览器将负责使用默认的＃键滚动。但很明显没有阻尼效果。
这不是在IE6和IE7的测试。
If the browser has Javascript off, the browser will take in charge the scroll using the default # key. But obviously without the damper effect. It was not tested on IE6 and IE7.
这篇关于滚动使用JavaScript的网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
