Javascript_javascript スキルに基づいて「トップに戻る」ボタンを実装する

ウェブページのコンテンツが多すぎると、データが分割画面で表示されます。画面が多いと、ユーザーがアクセスしたデータがページの下部に到達し、元のページに戻るまでに時間がかかります。これにより、ユーザー エクスペリエンスが少し悪くなる可能性があります。そのため、大量のページ データを含む Web ページでは、Web ページの先頭にすぐに移動できるようになります。
それでは、このような関数を実装してみましょう。

このページにはデータを書き込みません。先頭に戻るボタンとして a タグを追加し、クラス名「top」を付けます。

<a href="#" class="top">顶部</a>

次にスタイルシートを設定します。

body {
  height: 3000px;
}

.top {
  position: absolute;
  top: 120px;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
  text-align: center;
  background-color: #666666;
  color: #ffffff;
  right: 10px;
  transition: all 0.3s;
   visibility: hidden;
}
.top:hover {
  background-color: #ff3300;
}

ここでは、主にページにスクロール効果を与えるために、本文の高さを 3000 に設定しています。ここでは、通常、Web ページの右側の少し下に配置します。

ユーザーがアクセスする Web ページがページの上部にある場合、このボタンは確実に表示されないことも分析する必要があるため、ここでは可視性を使用してボタンが表示されるかどうかを制御します。

インターフェースは非常に単純なので、まず JS の実装を分析しましょう。

まず、このボタンは Web ページ全体に影響を与えるため、スクロール イベントの監視をウィンドウ全体に設定する必要があります。そのため、ウィンドウに対して onscroll イベントを設定します。

window.onscroll = function (e) {...}

このイベントではトップに戻るボタンの上下位置と表示するかどうかを制御します。

まず、上下位置の制御を完了します。

上部と下部の位置を制御するには、scrollTop の高さと Web ページの単一画面表示の高さを計算する必要があります。ユーザーがページに入ったときに、このボタンを中央右の位置に配置します。デフォルトでのページの計算は次のとおりです:

var n_half_height = window.screen.height / 2;

この値をボタンの一番上の属性に割り当てます。

その後、ユーザーがスクロールしても位置は確実に変更されず、このときの計算は

となるはずです。

var n_stop = e.target.scrollingElement.scrollTop; //获取scrollTop的高度
var n_top = n_stop + n_half_height;//得到位置

これは onsroll のパラメータ イベントである e オブジェクトです。ここでは Google Chrome を使用しています。互換性が必要な場合は、対応できます。

各スクロールは高さを計算する必要があるため、この値を onscroll イベントに配置する必要があります。次に、この値をボタンの top 属性に割り当てます。
もちろん、忘れないでください。scrollTop が 0 の場合、ボタンは表示する必要はありません。0 より大きい場合は、ボタンを表示する必要があります。前述したように、これでコードは完成です。

Javascript の完全なコード

var ele_body = document.body;
var ele_top = document.getElementsByClassName("top")[0];
var n_half_height = window.screen.height / 2;
ele_top.style.top = n_half_height + "px";
window.onscroll = function (e) {
 var n_stop = e.target.scrollingElement.scrollTop;
 if (n_stop === 0 ) {
  ele_top.style.visibility = "hidden";
 }else {
  ele_top.style.visibility = "visible";
 }
 var n_top = n_stop + n_half_height ;
 ele_top.style.top = n_top + "px";
}

最終効果表示:

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。