目立たない巻物からトップへのボタンを作成する方法

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

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

方法1：簡単な実装

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

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

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

 var rootelement = document.documentelement;

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

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

scrolltotopbtn.addeventlistener（ "click"、scrolltopop）;

scrollToTop関数では、 scrollToメソッドを使用して画面の上部までスクロールします。

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

スタイルを少し調整します：

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

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

 <button id="scrollToTopBtn">☝☝️</button>

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

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

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

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

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

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

scrollHeightからclientHeightは、垂直にスクロールできるピクセルの総数です。

 var scrolltotal = rootelement.scrollheight -rootelement.clientheight;

scrollTotal変数は、垂直にスクロールできるピクセルの最大数を表します。スクロール量をスクロールしたピクセルの総数で除算して、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％にスクロールしてそれよりも高いときに隠すとボタンが表示されます。

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

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

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

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

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

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

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

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

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

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

 Observer = new IntersectionObserver（callback）;

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

 Observer.observe（ターゲット）;

滑らかなスクロールを実現する方法は？

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

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

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

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

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

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