ページを先頭に戻す3つの実装(アンカータグ、js)_javascriptスキル-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 17:49:29

オリジナル

1224 人が閲覧しました

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