js JQueryの実装方法 トップに戻る function_jquery

多くの Web サイトにはトップに戻る効果があります。この記事では、jquery を使用してトップに戻るボタンを実装する方法について説明します。
まず、次の HTML 要素を先頭に追加する必要があります。

< /span> Return Top

a タグはアンカー ポイントの先頭を指します。これにより、先頭に のアンカー ポイントが配置されなくなります。ブラウザがjsをサポートしないようにすることで、トップに戻る効果も得られます。
画像を上部に戻して右側に表示したい場合は、次のような CSS スタイルも必要です:

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

/*returnTop*/
p#back-to-top{
position:fixed;
>bottom:100px;
right:80px;
p#back-to-top a{
text-decoration:none; :#d1d1d1;
display:block;
width:64px;
/*ジャンプリンク内のテキストにグラデーション効果を追加するには、 :color 1s;
-webkit -transition:color 1s;
-o-transition:color 1s;
p#back-to-top a:hover{
color:# 979797;
}
p#back-to-top a span{
background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px; -radius:6px;
display :block;
width:56px;
margin-bottom:5px; ラベルの背景色に影響を与える*/
-moz-transition:background 1s;
-o-transition:background 1s; 🎜>#back-to-top a:hover span {
background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;


上記のスタイルの背景画像はスプライト画像です。友人の便宜のために、トップに戻る 2 つの個別の画像が以下に提供されています:










はい、HTML とスタイルです。また、ページがスクロールするときにフェードインおよびフェードアウトする「トップに戻る」ボタンを制御するために js を使用する必要もあります。

コードをコピー コードは次のとおりです: <script> <br>$(function(){ <br>//スクロールバー 上から 100 ピクセル以下の位置ではジャンプリンクが表示され、それ以外の場合は非表示になります <div class="codetitle">$(function () { <span>$(window).scroll(function(){ <a style="CURSOR: pointer" data="40558" class="copybut" id="copybut40558" onclick="doCopy('code40558')">if ( $(window).scrollTop ()>100){ <u>$("#back-to-top").fadeIn(1500); </u>} </a>else </span>{ </div>$( "#back-to-top").fadeOut(1500); <div class="codebody" id="code40558">} <br>}) <br>//ジャンプリンクをクリックするとページの先頭に戻ります<br>$("#トップに戻る") .click(function(){ <br>$('body,html').animate({scrollTop:0},1000); <br>return false; <br>}); <br>}); <br>}); <br></script>


次のアドレスから実際の効果を確認できます:
http://outofmemory .cn/code-snippet/tagged/javascript
ページをロードした後、先頭に戻った効果を確認するには、スクロール バーを少し下にドラッグする必要があることに注意してください。