JavaScript は単に先頭のコードとコメントに戻るだけです-jsチュートリアル-php.cn

JavaScript は単に先頭のコードとコメントに戻るだけです

黄舟

リリース： 2017-11-16 16:39:07

オリジナル

3473 人が閲覧しました

私たちの日々の開発プロセスでは、ユーザーにより良いエクスペリエンスを提供するために、ページにトップに戻る機能が組み込まれています。最も一般的なのは、JavaScript を使用してトップに戻るコードを実装することです。詳細は簡単ですトップのコードに戻ります。

最近カテゴリの多いランキングページを作り、写真とテキストで表示させてみたのですが…結果的には明らかにページが長すぎて、当然ユーザーエクスペリエンスも十分ではありませんでした。最後に、このページのカテゴリ名アンカーブロックに直接移動できるように、ページ内ジャンプナビゲーションをページの上部に追加することを考えました。もちろん、より良いエクスペリエンスを実現するには、これを「トップに戻る」機能と組み合わせる必要があります。もちろん、通常の状況では、コンテンツが弱く、関連性が不十分な場合は、直帰率が非常に高くなるため、まず長すぎるページを避ける必要があります。

以下は、トップに戻る効果の簡単なコード実装とコメントです。

1. 最も単純な静的なトップへの戻りは、クリックしてページのトップに直接ジャンプし、ページの下部に固定配置してトップに戻る関数でよく使用されます

方法 1: 名前付きの関数を使用します。アンカーをクリックすると、トップのプリセット ID を持つトップ要素に戻ります

html コード

<a href="#top" target="_self">返回顶部</a>

ログイン後にコピー

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

html コード

<a href="javascript:scroll(0,0)">返回顶部</a>

ログイン後にコピー

欠点: リターン効果は即時であり、一般的な閲覧ページのスクロール感覚に準拠しません

はページの下部に静的に固定されます。ユーザーには表示されない場合があります。

2. 単純な静的トップへの戻り、js を使用してスクロール効果をシミュレートし、トップまでスライドします

js コード

 pageScroll(){
    window.scrollBy(0,-100);
    scrolldelay = setTimeout(&#39;pageScroll()&#39;,100);
     sTop=document.documentElement.scrollTop+document.body.scrollTop;
    (sTop==0) clearTimeout(scrolldelay);
}

ログイン後にコピー

html コード

<a onclick="pageScroll()">返回顶部</a>

ログイン後にコピー

欠点: スクロール効果はスムーズではありません、ページが非常に長い場合は、クリックしてページの先頭に戻ると、ページを正常に閲覧できなくなります

上記と同じは、まだ静的に固定されています。ページの下部にあり、ユーザーには公開されない場合があります。

3. トップに戻る動的オンデマンド読み込み、CSS サイドスクリーン

絶対位置決め、より良いエクスペリエンスを実現するためにシンプルな jQuery アニメーションと組み合わせる

js コード

 gotoTop(min_height){
     gotoTop_html = &#39;<p id="gotoTop">返回顶部</p>&#39;;
    $("#page").append(gotoTop_html);
    $("#gotoTop").click(
(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
    }).hover(        (){$().addClass("hover");},
(){$().removeClass("hover");
    });
    min_height ? min_height = min_height : min_height = 600;
    $(window).scroll((){
         s = $(window).scrollTop();
        ( s > min_height){
            $("#gotoTop").fadeIn(100);
        }{
            $("#gotoTop").fadeOut(200);
        };
    });
};
gotoTop();

ログイン後にコピー

CSS スタイルコード

{:;:;:75;:;:;:;:;:;:;:;:;:;}{:;:}{:;:;:;}

ログイン後にコピー

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

要約:

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