平滑滚动而不使用jQuery [英] Smooth scroll without the use of jQuery
问题描述
我正在编写一个页面，我只想使用原始JavaScript代码进行UI，而不受任何插件或框架的干扰。
现在我挣扎着找到一种不用jQuery即可顺利滚动页面的方法。 解决方案
试试这个平滑滚动演示或算法例如：
- 使用
self.pageYOffset - 获取元素的位置，直到您想要滚动到的位置：
element.offsetTop - 使用
window.scrollTo
来循环滚动到该位置，
另见其他受欢迎的答案对此> 安德鲁约翰逊的原始代码： 相关链接： I'm coding up a page where I only want to use raw JavaScript code for UI without any interference of plugins or frameworks. And now I'm struggling with finding a way to scroll over the page smoothly without jQuery. Try this smooth scrolling demo, or an algorithm like:
See also the other popular answer to this question. Andrew Johnson's original code:
Related links: 这篇关于平滑滚动而不使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
function currentYPosition（）{
// Firefox，Chrome，Opera，Safari
if（self.pageYOffset）return self.pageYOffset;
// Internet Explorer 6 - 标准模式
if（document.documentElement&& document.documentElement.scrollTop）
return document.documentElement.scrollTop;
// Internet Explorer 6,7和8
if（document.body.scrollTop）return document.body.scrollTop;
返回0;
}
函数elmYPosition（eID）{
var elm = document.getElementById（eID）;
var y = elm.offsetTop;
var node = elm;
while（node.offsetParent&& node.offsetParent！= document.body）{
node = node.offsetParent;
y + = node.offsetTop;
}返回y;
}
function smoothScroll（eID）{
var startY = currentYPosition（）;
var stopY = elmYPosition（eID）;
var distance = stopY> startY？ stopY - startY：startY - stopY;
if（distance< 100）{
scrollTo（0，stopY）;返回;
}
var speed = Math.round（distance / 100）;
if（speed> = 20）speed = 20;
var step = Math.round（distance / 25）;
var leapY = stopY> startY？ startY + step：startY - step;
var timer = 0;
if（stopY> startY）{
for（var i = startY; i< stopY; i + = step）{
setTimeout（window.scrollTo（0，+ leapY +） ，计时器*速度）;
leapY + = step;如果（leapY> stopY）leapY = stopY;计时器++;
} return;
}
for（var i = startY; i> stopY; i- = step）{
setTimeout（window.scrollTo（0，+ leapY +），timer * speed） ;
leapY - = step;如果（leapY
$ / code $ / pre
$ hr
self.pageYOffsetelement.offsetTopwindow.scrollTo
function currentYPosition() {
// Firefox, Chrome, Opera, Safari
if (self.pageYOffset) return self.pageYOffset;
// Internet Explorer 6 - standards mode
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
// Internet Explorer 6, 7 and 8
if (document.body.scrollTop) return document.body.scrollTop;
return 0;
}
function elmYPosition(eID) {
var elm = document.getElementById(eID);
var y = elm.offsetTop;
var node = elm;
while (node.offsetParent && node.offsetParent != document.body) {
node = node.offsetParent;
y += node.offsetTop;
} return y;
}
function smoothScroll(eID) {
var startY = currentYPosition();
var stopY = elmYPosition(eID);
var distance = stopY > startY ? stopY - startY : startY - stopY;
if (distance < 100) {
scrollTo(0, stopY); return;
}
var speed = Math.round(distance / 100);
if (speed >= 20) speed = 20;
var step = Math.round(distance / 25);
var leapY = stopY > startY ? startY + step : startY - step;
var timer = 0;
if (stopY > startY) {
for ( var i=startY; i<stopY; i+=step ) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY += step; if (leapY > stopY) leapY = stopY; timer++;
} return;
}
for ( var i=startY; i>stopY; i-=step ) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
}
}
