ページを先頭に戻す3つの実装(アンカータグ、js)_javascriptスキル

この記事では、ページの先頭に戻るための 3 つの簡単なコードを紹介します。単純な HTML (http://www.jb51.net/web/62651.html) アンカー タグを使用することもできます。 Javascript Scroll (http://www.jb51.net/article/31422.htm) この関数には動的に返されるものもありますが、この記事では再度紹介しません。必要に応じていずれかを選択できますが、要するに、コードを減らすことができる場合は、コードを減らす必要があります。天源ブログがダメだったらこの機能は追加されませんでした。

1. アンカータグを使用してページの先頭に戻ります

HTML アンカータグを使用するのが最も簡単ですが、クリックすると少し見苦しくなります。アンカータグはアドレスバーに表示されますが、それ以外は何も表示されません。
ページの上部に配置します:

タグの後の任意の場所に配置します。頂上近くにいてください。
ページの下部に配置します:
トップに戻る

2. Javascript のスクロール関数で先頭に戻ります。

スクロール関数は、スクロール バーの位置を制御するために使用されます。非常に単純な実装方法が 2 つあります。
方法 1:
<。 ;a href="javascript:scroll(0,0 )">トップに戻る
scroll の最初のパラメータは水平位置、2 番目のパラメータは垂直位置です。縦方向に 50 ピクセルに配置したい場合は、scroll(0,50) に変更します。
方法 2:
このメソッドは、先頭に戻るプログレッシブです。コードは次のとおりです:

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

function pageScroll() {
window.scrollBy(0,-10)
scrolllay = setTimeout('pageScroll()'; ,100);
}
トップに戻る

これは動的にトップに戻りますが、先頭に戻りますが、コードはまだ実行中です。それを停止するには、pageScroll 関数に文を追加する必要もあります。

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

if(document.documentElement.scrollTop==0) clearTimeout (scrolllay) ;

3. Onload とスクロール関数を使用して動的に先頭に戻ります

1。 Web ページの BODY タグの末尾 ;div id="gotop">トップに戻る
2. 次に、次の JS スクリプト部分を呼び出します (このスクリプトは Tianyuan によるオリジナルではなく、以下から収集されました)以前の Z-BLOG 公式フォーラムにはソース パッケージがまだ作成されていません。元の作成者がそれを見た場合は、メッセージを残して追加してください):

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

BackTop=function(btnId){
var btn=document.getElementById(btnId); d=document.documentElement;
window.onscroll=set;
btn.style.display="none"; >this.timer=setInterval(function(){
d.scrollTop-=Math.ceil( d.scrollTop*0.1);
if(d.scrollTop==0) clearInterval(btn.timer,window. onscroll=set);
};
関数セット (){btn.style.display=d.scrollTop?':"none"}
BackTop('gotop');


Z-BLOG の場合 つまり、$(document).ready(function(){.... 関数内に置くことができます、またはgotop.js などの js ファイルとして独立して保存し、次のように渡すことができます。

もちろん、この呼び出しメソッドは、パスが JS であることを前提としています。他の場所を参照してください。
補足:
上記のトップへ戻るコードはすべてテキスト形式です。テキストをより美しいアイコンに変更することもできます (つまり、ページがスクロールすると、トップに戻るアイコンも続きます) を実行するにはレイヤーなどの使用が必要ですが、これは少し複雑なので、この記事では説明しません。