私は最近、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()関数は、Revealing Module Patternを使用してscrolling()、を介してターゲット要素のIDを関数に渡し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()ターゲット要素がウィンドウの上部で強打されていることを確認するために、完了時にメソッド（ピクセルの何分の1かで外れていることに気付かないでください！）。
if2行目のステートメントscroller()はE、前の位置（prev）と照合して、ページがスクロールしているかどうかを確認します（ターゲットがページの下部に向かっていて、ページがそれ以上スクロールできない場合）。
その下の3値条件は、ゼロに近づくにつれてincrement値を減らしEます。これにより、ページが一方の方向にオーバーシュートし、次に跳ね返ってもう一方の方向にオーバーシュートし、次に跳ね返ってもう一方の方向にオーバーシュートし、ピンポンスタイルで無限のかなたになります。
ページの高さが約4000pxを超える場合は、3項式の最初の条件（ここでは+/- 20）および/またはincrement値を設定する除数（ここでは40）の値を増やすことができます。
約遊ぶdurationセット除数、incrementとの三元状態での値scroller()ページに合うように調整する機能を、あなたを可能にしなければなりません。