この効果を実現するには、まず次の基本知識を理解する必要があります: フォーム スクロール イベント: $(window).scroll(function(){...}); フォーム スクロール距離の取得: $(window) ).scrollTop(); フォームの高さを取得します: $(window).height(); 上記の内容を理解すると、ハイパーリンク コントロールを通じて上部に戻る効果を実現できます。 1. インターフェース構造コードを準備します: コードをコピーします コードは次のとおりです: <フォーム id="form1" runat="server"> HyperLink> jQuery を使用して先頭に戻る効果を実現します 。 。 。 。 。 。 (多くのコンテンツがあります。スクロールできます) トップに戻る 2. 上部のコントロールにスタイルを追加します。 >コードをコピー コードは次のとおりです: </u>.backToTop </a>{ </span>背景色: 黄色; </div>幅: 30 ピクセル; <div class="codebody" id="code49356">境界線: 1 ピクセル; <br>フォントの太さ: 太字; <br>font-family : Arial; <br>font-size: x-large; <br>position:absolute; // 位置は絶対に右に設定する必要があることに注意してください。 100px; <br>} <br> 3. 一番上の効果を実現するためのスクリプト コードを追加します。コードをコピーします コードは次のようになります: <br>$(document).ready(function () { <br>$("#backToTopLink").attr( "title", "トップに戻る"); </div>$("#backToTopLink").attr("href", "#Top");リンクでトップ<br>$(window).scroll(function () { <br>if ($(window).scrollTop() $("#backToTopLink").fadeOut(200) ); <span>} <a style="CURSOR: pointer" data="27330" class="copybut" id="copybut27330" onclick="doCopy('code27330')">else { <u> $("#backToTopLink").fadeIn(400); </u>} </a>var v_Top = $(window).height() - $(". backToTop").height() - 10 $(window).scrollTop(); // スクロール後の上部ボタンの上部位置を動的に計算します </span>$(".backToTop").css("top", v_Top " px"); }); <div class="codebody" id="code27330">}); <br> このコードは、リターンの効果を実現するハイパーリンク コントロールを示すだけであることに注意してください。頂上へ。 jQuery アニメーション効果を使用して、上部のスムーズな配置を実現することもできます。 トップにスムーズに戻るためのコードは次のとおりです: $('#backToTopLink').click(function(){$('html,body').animate({scrollTop: '0px' }, 800);} ); // $("#backToTopLink").attr("href", "#Top"); を置き換えます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
