ASP.NET jQuery 例 9 コントロール ハイパーリンクを使用してトップに戻るeffect_jquery

この効果を実現するには、まず次の基本知識を理解する必要があります:
フォーム スクロール イベント: $(window).scroll(function(){...});
フォーム スクロール距離の取得: $(window) ).scrollTop();
フォームの高さを取得します: $(window).height();
上記の内容を理解すると、ハイパーリンク コントロールを通じて上部に戻る効果を実現できます。
1. インターフェース構造コードを準備します:

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

<フォーム id="form1" runat="server">

HyperLink>

jQuery を使用して先頭に戻る効果を実現します

。 。 。 。 。 。 (多くのコンテンツがあります。スクロールできます)

トップに戻る

2. 上部のコントロールにスタイルを追加します。 >コードをコピー

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


3. 一番上の効果を実現するためのスクリプト コードを追加します。コードをコピーします


コードは次のようになります:





このコードは、リターンの効果を実現するハイパーリンク コントロールを示すだけであることに注意してください。頂上へ。 jQuery アニメーション効果を使用して、上部のスムーズな配置を実現することもできます。
トップにスムーズに戻るためのコードは次のとおりです:
$('#backToTopLink').click(function(){$('html,body').animate({scrollTop: '0px' }, 800);} ); // $("#backToTopLink").attr("href", "#Top"); を置き換えます。