書き方
【1】アンカーポイント
アンカーリンクを使用することは、上部への単純な戻りです。この実装は、主にページの上部に指定された名前でアンカーリンクを配置し、ページの下のアンカーに戻すリンクを配置します。ユーザーはリンクをクリックして、アンカーが配置されている上位の位置に戻ります。
[注]アンカーポイントに関する詳細情報はこちらに移動します
<body style = "height：2000px;"> <div id = "topanchor"> </div> <a href = "＃topanchor" style = "position：sixt; right; right：0; bottom：0"> back to top </a> </body>
【2】スクロールトップ
Scrolltopプロパティは、コンテンツ領域の上に隠されたピクセルの数を示します。要素がスクロールされていない場合、スクロールトップの値は0です。要素が垂直にスクロールされている場合、スクロールトップの値は0より大きく、要素の上の見えないコンテンツのピクセル幅を示します。
Scrolltopは書く可能性があるため、Scrolltopを使用して関数を上部に戻すことができます
[注]ページ上のScrolltopの互換性の問題の詳細はここに移動します
<body style = "height：2000px;"> <button id = "test" style = "position：sixt; right; right：0; bottom：0"> back to top </button> <script> test.onclick = function（）{document.body.scrolltop = document.documentelement.scrolltop = 0;}【3】scrollto（）
scrollto（x、y）メソッドは、現在のウィンドウに表示されるドキュメントをスクロールします。これにより、ドキュメントの座標xとyで指定されたポイントが表示領域の左上隅にあります。
Scrollto（0,0）を設定して、上部に戻る効果を実現します
<body style = "height：2000px;"> <button id = "test" style = "position：sixt; right：0; bottom：0"> back to top </button> <script> test.onclick = function（）{scrollto（0,0）;} </script> </body>【4】Scrollby（）
Scrollby（x、y）メソッドは現在のウィンドウに表示されているドキュメントをスクロールし、xとyはスクロールの相対量を指定します
現在のページのスクロール長をパラメーターとして使用し、逆にスクロールするだけで、上部に戻る効果を実現できます。
<body style = "height：2000px;"> <button id = "test" style = "position：sixt; right：0; bottom：0"> back to top </button> <script> test.onclick = function（）{var top = document.body.scrolltoptop || document.documentlement.scrolltopscrollby（0、-top）;} </script> </body>【5】scrollintoview（）
element.scrollintoviewメソッド現在の要素をスクロールし、ブラウザの可視領域に入ります。
この方法は、ブール値をパラメーターとして受け入れることができます。真実の場合、それは要素の上部が現在の領域の可視部分の上部と整列していることを意味します（現在の領域がスクロール可能である場合）。 FALSEの場合、要素の底が現在の領域の可視部分の尾と整列していることを意味します（現在の領域がスクロール可能である場合）。このパラメーターが提供されていない場合、デフォルトは真です
この方法を使用する原則は、アンカーポイントを使用する原則に似ています。ページの上部にターゲット要素を設定します。ページがスクロールすると、ターゲット要素がページ領域の外側のスクロールされます。背面から上のボタンをクリックして、元の位置に戻り、期待される効果を実現します。
<body style = "height：2000px;"> <div id = "target"> </div> <button id = "test" style = "position：sixt; right：0; botton：0"> back to top </button> <script> test.onclick = function（）{target.scrollintoview（）;} </body> </body>強化
以下は、関数を上部に戻します
【1】拡張を表示します
CSSを使用して「トップに戻る」を描画して視覚的なグラフィックに変えます（IE8-ブラウザーと互換性がある場合は、代わりに写真を使用します）
CSS擬似エレメントと擬似ホーバー効果を使用します。マウスが要素に移動すると、上部に戻るテキストが表示され、移動しても表示されません。
<style> .box {position：sixt; right：10px; bottom：10px; height：30px; width：50px; text-align：center; padding-top：20px;バックグラウンドカラー：Lightblue; Border-Radius：20％; Overflow：Hidden;}。Box：Hover：Hover：Hover：Before {Top：50％} 40px; color：peru; font-weight：bold;} .box-in {visibility：visibility：visible; display：inline-block; height：20px; width：20px; border：3px solid-color：white透明な透明な白：変換：回転（45deg）;} id = "box"> <div> </div> </div> </body>【2】アニメーションの拡張
アニメーションを上部に追加するために、スクロールバーが特定の速度で上部に戻ってきます
アニメーションには2つのタイプがあります。1つはCSSアニメーションで、スタイルの変更と移行が必要です。もう1つはJavaScriptアニメーションで、タイマーを使用して実装します。
上記の5つの実装では、scrolltop、scrollto（）、およびscrollby（）メソッドがアニメーションを追加でき、スタイルの変更がないため、JavaScriptアニメーションのみを追加できます
タイマー、SetInterval、SetimeOut、およびRequestAnimationFrameを使用できます。以下は、最高のパフォーマンスを発揮するタイマーrequestAnimationフレームを使用して実装するためです。
[注] IE9-O-Browserはこの方法をサポートしていません。SettimeOutを使用することができます。
1. Scrolltopアニメーション効果を追加します
タイマーを使用して、Scrolltopの値を0に減らしてアニメーションが終了するまで50増加します
<script> var timer = null; box.onclick = function（）{cancelanimationFrame（Timer）; Timer = requestAnimationFrame（function fn（）{var otop = document.body.scrolltop || document.documentelement.scrolltop; if（otop> 0）{document.doctropltop.ddocmenteletement.ddolltop- 50; Timer = RequestAnimationFrame（fn）;} else {cancelanimationFrame（Timer）;}}）;} </script>2。Scrollto（）アニメーション効果を追加します
Scrolltop値を介してScrollto（x、y）のyパラメーターを取得し、0に削減され、アニメーションが終了するまで毎回50を減らします
<script> var timer = null; box.onclick = function（）{cancelanimationFrame（Timer）; Timer = requestAnimationFrame（function fn（）{var otop = document.body.scrolltop || document.documentelement.scrolltop; if（otop> 0）{schrolltoto（0、otop-50）; timer RequestAnimationFrame（fn）;} else {cancelanimationFrame（Timer）;}}）;} </script>3. Scrollby（）アニメーション効果を追加します
scrollby（x、y）のyパラメーターをScrolltopが0になるまで-50に設定し、ロールバックは停止します
<script> var timer = null; box.onclick = function（）{cancelanimationFrame（Timer）; Timer = requestAnimationFrame（function fn（）{var otop = document.body.scrolltop || document.documentelement.scrolltop; if（otop> 0）{schrollby（0、-50）; timer = timer = RequestAnimationFrame（fn）;} else {cancelanimationFrame（Timer）;}}）;} </script>成し遂げる
Scrolltop、Scrollby（）およびScrollto（）メソッドはすべて、アニメーションの停止の参照としてScrolltop値が0に減少するかどうかをすべて使用し、3つのアニメーションの原則と実装は基本的に似ており、パフォーマンスも似ています。最後に、最も一般的に使用されるScrolltop属性でアニメーション強化効果が達成されます
もちろん、50の速度が適していないと思われる場合は、実際の状況に従って調整できます
<style> .box {position：sixt; right：10px; bottom：10px; height：30px; width：50px; text-align：center; padding-top：20px;バックグラウンドカラー：Lightblue; Border-Radius：20％; Overflow：Hidden;}。Box：Hover：Hover：Hover：Before {Top：50％} 40px; color：peru; font-weight：bold;} .box-in {visibility：visibility：visible; display：inline-block; height：20px; width：20px; border：3px solid-color：white透明な透明な白：変換：回転（45deg）;} id="box"><div></div></div> </body><script>var timer = null;box.onclick = function(){cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){var oTop = document.body.scrollTop || document.documentElement.scrollTop;if(oTop > 0）{document.body.scrolltop = document.documentelement.scrolltop = otop -50; timer = requestanimationframe（fn）;} else {cancelanimationFrame（Timer）;}}）;} </script>上記は、JS実装に基づいた5つのライティング方法（実装から強化まで）の完全な説明であり、これについて紹介しました。それがあなたに役立つことを願っています。ご不明な点がございましたら、メッセージを残してください。編集者はあなたに時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！