我最近开始着手解决无法使用jQuery的问题，因此我将解决方案记录在后，以供后代参考。
var scroll = (function() {
var elementPosition = function(a) {
return function() {
return a.getBoundingClientRect().top;
};
};
var scrolling = function( elementID ) {
var el = document.getElementById( elementID ),
elPos = elementPosition( el ),
duration = 400,
increment = Math.round( Math.abs( elPos() )/40 ),
time = Math.round( duration/increment ),
prev = 0,
E;
function scroller() {
E = elPos();
if (E === prev) {
return;
} else {
prev = E;
}
increment = (E > -20 && E < 20) ? ((E > - 5 && E < 5) ? 1 : 5) : increment;
if (E > 1 || E < -1) {
if (E < 0) {
window.scrollBy( 0,-increment );
} else {
window.scrollBy( 0,increment );
}
setTimeout(scroller, time);
} else {
el.scrollTo( 0,0 );
}
}
scroller();
};
return {
To: scrolling
}
})();
scroll.To('elementID');
该scroll()函数使用显露模块模式通过传递目标元素的ID到其scrolling()函数scroll.To('id')，后者设置函数使用的值scroller()。
分解
在scrolling()：
el ：目标DOM对象elPos ：通过返回函数 elememtPosition()该，每次调用时都会给出目标元素相对于页面顶部的位置。duration ：转换时间（以毫秒为单位）。increment ：将目标元素的起始位置分为40步。time ：设置每个步骤的时间。prev：目标元素在中的先前位置scroller()。E：保留目标元素在中的位置scroller()。
实际工作由scroller()继续调用自身的函数完成（通过setTimeout()）直到目标元素位于页面顶部或页面不再滚动为止。
每次scroller()调用时，它都会检查目标元素的当前位置（保留在变量中E），如果是> 1OR < -1，或者页面仍可滚动，则将窗口按increment像素移动-上下移动，取决于E是正值还是负值。当E不是> 1OR< -1或E===时prev，函数将停止。我DOMElement.scrollTo()在完成时添加了该方法，只是为了确保目标元素在窗口顶部爆炸（不是您会注意到它只是一个像素点！）。
第if2行的语句scroller()通过检查E其先前位置来检查页面是否正在滚动（如果目标可能朝页面底部，并且页面无法进一步滚动）prev））。
其下的三元条件将increment值降低为E接近零。这将阻止页面以一种方式超调，然后弹跳以另一种方式超调，然后弹回以另一种方式超调，例如乒乓球样式，直至无穷远。
如果您的页面高度超过c.4000px，则可能要增加三元表达式的第一个条件的值（此处为+/- 20）和/或设置该increment值的除数（此处为40）。
与duration，设置的除数increment以及的三元条件下的值一起玩scroller()应该可以使您定制适合您页面的功能。