上部のボタンに便利な返品により、ユーザーはスクロールする努力なしでページの上部にすばやく戻ります。この機能は、コンテンツが豊富なページ、単一ページのWebサイト（特に無制限のスクロールを使用する場合）、およびさまざまな畫面サイズのモバイルデバイスに特に役立ちます。

これらのボタンは通常、ウェブサイトの下隅に吊り下げられており、クリックしてページの上部に戻ります。 JavaScriptで簡単に作成しますが、十分な大きさのクリック領(lǐng)域を維持しながら視覚的に目立たないようにします。単純なものから複雑なものまで、いくつかの実裝方法を見てみましょう。

方法1：簡単な実裝

まず、JavaScriptを使用してボタンを選択します。

 var scrolltotopbtn = document.getElementById（ "Scrolltotopbtn"）;

document.documentElementドキュメントのルート要素を返し、オフセット値を取得するために使用されます。コード呼び出しを容易にするために、 rootElementという名前の変數(shù)に保存します。

 var rootelement = document.documentelement;

クリックイベントリスナーをボタンに追加します：

 functionscrolltotop（）{
  //トップロジックに戻る}

scrolltotopbtn.addeventlistener（ "click"、scrolltopop）;

scrollToTop関數(shù)では、 scrollToメソッドを使用して畫面の上部までスクロールします。

 functionscrolltotop（）{
  //トップロジックrootelement.scrolltoに戻る（{
    上：0、
    動作：「滑らか」
  }）;
}

スタイルを少し調(diào)整します：

 #scrolltotopbtn {
  背景色：黒;
  國境：なし;
  ボーダーラジウス：50％;
  色：白;
  カーソル：ポインター;
  フォントサイズ：16px;
  ラインハイト：48px;
  幅：48px;
}

ページの下部にボタンを置きます（フッターなど）：

 <button id="scrollToTopBtn">???</button>

効果は次のとおりです。（方法1のレンダリングはここに表示する必要があります）

方法2：スクロール位置を検出します

スクロールイベントリスナーを使用して、スクロールを検出します。

 function handlescroll（）{
  //イベントの処理をスクロールする}
document.addeventlistener（ "scroll"、handlescroll）;

handleScroll関數(shù)は、ユーザーがスクロールするたびに呼び出されます。スクロール可能なピクセルの総數(shù)を取得する必要があります。

• scrollHeight 、オーバーフローのために見えない部品を含む要素の高さを返します。
• clientHeight 、要素の可視部分の高さ（ピクセル）を返します。

scrollHeightからclientHeightは、垂直にスクロールできるピクセルの総數(shù)です。

 var scrolltotal = rootelement.scrollheight -rootelement.clientheight;

scrollTotal変數(shù)は、垂直にスクロールできるピクセルの最大數(shù)を表します。スクロール量をスクロールしたピクセルの総數(shù)で除算して、0?1の比率を取得します。このスケールでは、ボタンを簡単に切り替えることができます。

たとえば、ユーザーがページの総高さの80％にスクロールすると、上部への戻りボタンが表示されます（比率は0.80）。 80％は任意の値であり、1に近いほど、ユーザーがボタンを表示するためにスクロールする必要があります。

JavaScriptコードは次のとおりです。

 var rootelement = document.documentelement;

function handlescroll（）{
  //スクロールイベント処理var scrolltotal = rootelement.scrollheight -rootelement.clientheight;
  if（（rootelement.scrolltop / scrolltotal）> 0.80）{
    // show button scrolltotopbtn.classlist.add（ "showbtn"）;
  } それ以外 {
    // [scrolltopbtn.classlist.remove（ "showbtn"）;
  }
}

document.addeventlistener（ "scroll"、handlescroll）;

ボタンを正しく見つけるには、一部のCSSが必要です。

 .scrolltotopbtn {
  /*以前と同じ一般的なスタイル*/

  /*右下隅に配置*/
  位置：修正;
  下：30px;
  右：30px;

  /*他のすべての要素よりも滯在*/
  z-index：100;

  /*不透明度を使用して非表示にします*/
  不透明：0;

  /*翻訳効果を追加*/
  変換：翻訳（100px）;

  /*遷移効果を追加*/
  遷移：0.5秒の容易さ。
}

.showbtn {
  不透明：1;
  変換：翻訳（0）;
}

このようにして、ユーザーがページの80％にスクロールしてそれよりも高いときに隠すとボタンが表示されます。

これは良い選択のように見え、イベントリスナーを追加するのも簡単です。ただし、現(xiàn)在のスクロール位置を常に確認するため、パフォーマンスオーバーヘッドは重要です。

この問題を解決する別の方法があります...

方法3：交差點オブザーバー

交差點オブザーバーAPIは素晴らしいソリューションです。これは、開発者がより最適化されたパフォーマンスのためにブラウザにほとんどのタスクを引き渡すことができるかなり新しいブラウザAPIです。 Travis Almandは、それがどのように機能するかを徹底的に説明しています。 MDNの定義は次のとおりです。

交差點オブザーバーAPIは、ターゲット要素を祖先要素またはトップレベルのドキュメントウィンドウで非同期的に観察する方法を提供します。

とても賢い！これは、ボタンをターゲット要素として使用できることを意味します。

 //配置する要素を選択しますvar target = document.queryselector（ "footer"）;

次に、要素がウィンドウと「交差する」ときに操作を?qū)g行するコールバック関數(shù)を書き込みます（つまり、視野に入ります）。コールバック関數(shù)は、引數(shù)としてのエントリの配列を受信します。

関數(shù)コールバック（エントリ、オブザーバー）{
  //コールバック関數(shù)は、1つのアイテムエントリのみを観察している場合でも、エントリの配列を返します。
    if（entry.isinterSecting）{
      // show button scrolltotopbtn.classlist.add（ 'showbtn'）;
    } それ以外 {
      //ボタンScrolltopbtn.classlist.Remove（ 'showbtn'）;
    }
  }）;
}

IntersectionObserverの新しいインスタンスを作成し、作成したコールバック関數(shù)を渡す必要があります。

 Observer = new IntersectionObserver（callback）;

最後に、オブザーバーに、上記のターゲット要素の交差點をウィンドウで観察し始めるように指示します。

 Observer.observe（ターゲット）;

滑らかなスクロールを?qū)g現(xiàn)する方法は？

もちろん！実際、クリスは2019年にCSSを使用して実裝する方法を示しました。

<a href="http://m.miracleart.cn/link/2e6d941e3bc2dbd3f122040f056b6718">ページの上部にジャンプします</a>

html {
  スクロールビハビオール：滑らか;
}

ここには、Chrisが記事で紹介したアクセシビリティ強化機能など、いくつかの微妙さがあります。重要なのは、CSSがJavaScriptで使用していたタスクを完了できる新しい機能を取得していることです。

それでおしまい！非常に簡単なアイデアから始めましょう。ユーザーのスクロール位置に基づいてボタンを表示および隠すことにより、それを強化します。次に、現(xiàn)在のスクロール位置を監(jiān)視する代わりに、交差點オブザーバーAPIを?qū)g裝することにより、パフォーマンスを改善します。最後に、CSSを使用してスムーズなスクロールを?qū)g現(xiàn)する方法がわかります。全體として、ページ上の他の要素をブロックせずに簡単に表示および使用できる上部ボタンに戻ります。

以上が目立たない巻物からトップへのボタンを作成する方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。