JAVASCRITTはトップコードを返します

4220 ワード

本文は3種類の簡単な戻りページのトップコードを紹介して、簡単なHTMLアンカーマークを使うことができて、Javascript Scroll関数を使って動的に戻ることができて、その他は懸濁スクリプトなどが少し複雑で、本文はもう紹介しなくて、みんなは自分の必要に応じてその中の1種を選ぶことができて、要するに簡潔で最も美しくて、コードを減らすことができてコードを減らすことができて、呼び出さないことができるのは呼び出さないでください.天縁ブログの文章が牛長でもこの機能を追加しません.
 
一、アンカーマークを使用してページ上部に戻る
HTMLアンカーマークを使うのが一番簡単ですが、少し見栄えが悪いので、クリックするとアドレスバーにこのアンカーマークが表示されますが、他には何もありません.
ページ上部の配置:

配置位置はラベルの後、上部に近づくだけでどこにでも置けます.
ページ下部の配置:
回到顶部
 
二、Javascript Scroll関数を使ってトップに戻る
scrooll関数はスクロールバーの位置を制御するために使用され、2つの簡単な実装方法があります.
方法1:1 <a href= "javascript:scroll(0,0)" > </a>
scrollの最初のパラメータは水平位置であり、2番目のパラメータは垂直位置であり、例えば垂直50画素に位置決めするにはscroll(0,50)に変更すればよい.
方法2:
この方法は漸進的に上部に戻り、いくつかをきれいにします.コードは以下の通りです.1 function pageScroll() { 2 window.scrollBy(0,-10); 3 scrolldelay = setTimeout( 'pageScroll()' ,100); 4 } 5 6 <a href= "pageScroll();" > </a>
これで動的に上部に戻りますが、上部に戻りますがコードはまだ実行されており、pageScroll関数に停止文を追加する必要があります.1 if (document.documentElement.scrollTop==0) clearTimeout(scrolldelay);三、Onloadにscroll機能を加えて動的にトップに戻る
1、まずホームページBODYタグが終わる前に、
上部に戻る

2、更に以下のJSシナリオ部分を呼び出す(本シナリオは天縁オリジナルではなく、以前はZ-BLOG公式フォーラムで収集されたもので、ソースパッケージは作者のリンクを持っていないので、原作者が見たら伝言を残して追加してください):01 BackTop= function (btnId){ 02      var btn=document.getElementById(btnId); 03      var d=document.documentElement; 04      window.onscroll=set; 05      btn.onclick= function (){ 06          btn.style.display= "none" ; 07          window.onscroll= null ; 08          this .timer=setInterval( function (){ 09              d.scrollTop-=Math.ceil(d.scrollTop*0.1); 10              if (d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set); 11          },10); 12      }; 13      function set(){btn.style.display=d.scrollTop? 'block' : "none" } 14 }; 15 BackTop( 'gotop' );
Z-BLOGでは、$(document).ready(function(){....関数に格納したり、gotop.jsなどのjsファイルに独立して保存したりして、次のようにすることができます.

を呼び出します.もちろん、場所は「戻る」タブの下に置いたほうがいいです.この呼び出し方法はパスがJSであると仮定しています.他の場所は自分で変更してください.
補足:
上記の戻りトップコードはいずれも文字仕様であり、文字をきれいなアイコンに変更してもよい.また、浮遊状の戻りトップコード(ページスクロール時に戻りトップアイコンも走るもの)もあり、レイヤなどに使用する必要があり、少し複雑になっているので、ここではリストしない.
参考資料:http://www.mediacollege.com/internet/javascript/page/scroll.html