追加のnotes_jqueryを使用してWebページのトップコード(複数のメソッド)に戻ります。

以下は、トップに戻る効果の簡単なコード実装とコメントです。
1. 最も単純な静的トップへの戻り。クリックすると、ページの下部に固定配置されてトップに戻る関数が使用されます。
方法 1: 名前付きアンカーをクリックすると、先頭のプリセット ID を持つ先頭要素に戻ります

コードをコピー コードは次のとおりです:

トップに戻る

方法 2: スクロール機能を操作して位置を制御します。スクロールバー (最初のパラメータは水平位置、2 番目のパラメータは垂直位置です)

コードをコピー コードは次のとおりです

トップに戻る

欠点: リターン効果は次のとおりです。即時に表示され、一般的な閲覧ページのスクロール感覚に準拠しません。
ページの下部に静的に固定されているため、ユーザーに必ずしも表示されるとは限りません。

2. 単純に静的に先頭に戻り、js を使用してスクロール効果をシミュレートし、上にスライドします

コードをコピーします コードは次のとおりです:

function pageScroll(){
//指定されたピクセル数でコンテンツをスクロールします (最初のパラメーターは右にスクロールするピクセル数です) 、2 番目のパラメータは下にスクロールします。ピクセル数)
window.scrollBy(0,-100)
//上方向へのスクロール効果をシミュレートするための遅延再帰呼び出し
scrolllay = setTimeout('pageScroll() ',100);
/ /scrollTop 値を取得します。DTD を宣言する標準 Web ページは document.documentElement.scrollTop を受け取ります。それ以外の場合は、2 つのうちの 1 つだけが有効になり、もう 1 つが有効になります。は常に 0 になるため、Web ページの真の値は、scrollTop の値を取得することで取得できます。
var sTop=document.documentElement.scrollTop document.body.scrollTop;先頭に到達し、遅延コードをキャンセルします (そうしないと、ページが先頭までスクロールし、通常どおりページを閲覧できなくなります)
if(sTop==0) clearTimeout(scrolllay);
}

コードをコピー コードは次のとおりです:

トップに戻る

欠点: スクロール効果が滑らかではなく、ページが非常に長い場合、クリックすると先頭に戻ります。ページの上部に到達しないと、ページを通常どおり閲覧できなくなります。
上記と同様、ページの下部に静的に固定されており、ユーザーには表示されない可能性があります。

3. 動的オンデマンド読み込みで先頭に戻り、CSS サイド画面の絶対配置をシンプルな jQuery アニメーションと組み合わせて、より良いエクスペリエンスを実現します

コピーcode コードは次のとおりです:

function gotoTop(min_height){
//先頭を返す事前定義された HTML コード。その CSS スタイルのデフォルトはDisplaying
var gotoTop_html = '

先頭に戻る

'
//先頭に戻る HTML コードを ID を持つ要素の末尾に挿入しますページ上のページ
$("#page ").append(gotoTop_html);
$("#gotoTop").click(//先頭に戻り、クリックして上にスクロールするアニメーションを定義します
function(){$('html,body').animate({scrollTop:0},700);
}).hover(//トップに戻る際のマウス入力のフィードバック効果を高めるため、CSS クラスの追加と削除を使用して、
function(){$(this).addClass("hover ");}、
function(){$(this).removeClass("hover"); を実装します。 🎜>});
//値が渡されない場合、デフォルトは 600 ピクセルです。
min_height ? min_height = min_height : min_height = 600;ウィンドウのスクロール イベントのハンドラー関数
$(window).scroll(function(){
//ウィンドウのスクロールを取得します。バーの垂直位置
var s = $(window)。 scrollTop();
//ウィンドウのスクロールバーの垂直位置がページの最小高さより大きい場合は、先頭に戻る要素をフェードインさせます。それ以外の場合はフェードインします。
if( s > min_height){
$("#gotoTop").fadeIn(100);
$("#gotoTop").fadeOut(200); );
};
gotoTop();


CSS スタイル コード:

コードをコピーします
コードは次のとおりです:

/*デフォルトのスタイル、主に画面の絶対位置を実現するためのposition:fixed*/
#gotoTop{display:none;position:fixed;top:75%;left:50%;cursor:ポインタ; margin-top:-50px;margin-left:520px;padding:9px 4px;width:20px;text-align:center;border:1px Solid #e0e0e0;background:#fff;}
/*CSS を使用ie6 でのposition:fixed効果を達成する式(expression)*/
#gotoTop{_position:absolute;_top:expression(documentElement.scrollTop documentElement.clientHeight * 3/4 "px")}
/ *マウスがフィードバック効果に入ります*/
#gotoTop.hover{background:#5CB542;color:#fff;text-decoration:none;}

このメソッドはページの高さを決定しますユーザーに表示される画面の絶対位置は CSS スタイルを使用して実現され、よりスムーズなスクロール効果は jQuery の助けを借りて実現されます。さらに考慮すべき点は、ユーザーがブラウザを無効にするように設定した場合、js を無効にした後、3 番目のソリューションを最初のソリューションと組み合わせることができます。無効になっていない場合は、3 番目のソリューションがユーザーに表示されなくなります。 jsコード内の文 最初のオプションを非表示にします。

つまり、長いページは可能な限り避けるべきであり、やむを得ない場合には、「トップに戻る」機能を追加すると、ユーザーのエクスペリエンスが比較的向上する可能性があります。