いくつかの一般的な Web ページのトップに戻るコード

ウェブサイトでは、クリックして head に戻り、クリックして top に戻ることがよくあります。今日は、簡単なクリックで head に戻ることができるコードについて説明します。

1. HTML アンカー タグを使用するのが最も簡単です

が、唯一の欠点は、スタイルがあまり良くなく、このアンカー タグが表示されてしまうことです。

<aname="top"id="top"></a>

先頭に近い限り、 タグの後のどこにでも配置できます。

ページの一番下に配置します:

<ahref="#top"target="_self">返回顶部</a>

2. JavaScriptを使用します スクロール関数を使用して先頭に戻ります

スクロール関数は、スクロールバーの位置を制御するために使用されます。非常に単純な2つがあります。実装方法:

方法 1 (推奨: シンプルで便利):

<ahref="javascript:scroll(0,0)">返回顶部</a>

スクロールの最初のパラメータは水平位置、2 番目のパラメータは垂直位置です。 たとえば、50 に配置したい場合。垂直方向にピクセル数を指定する場合は、scroll(0,50) に変更するだけです。

方法 2 (効果に焦点を当てる: ゆっくりと上向きに):

この方法は、上部に徐々に戻るので、見栄えが良くなります。コードは次のとおりです:

functionpageScroll(){window.scrollBy(0,-10);scrolldelay=setTimeout(&#39;pageScroll()&#39;,100);}<ahref="pageScroll();">返回顶部</a>

これは動的に上部に戻ります。ただし、先頭に戻りますが、コードはまだそこにあります。 実行するには、pageScroll 関数に文を追加して停止する必要があります。

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

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

1. まず次の JS スクリプト部分を呼び出します:

<divid="gotop">返回顶部</div>

Web ページに配置することも、gotop.js などの js ファイルとして独立して保存し、次のフォームから呼び出すこともできます:

BackTop=function(btnId){varbtn=document.getElementById(btnId);vard=document.documentElement;window.onscroll=set;btn.onclick=function(){btn.style.display="none";window.onscroll=null;this.timer=setInterval(function(){d.scrollTop-=Math.ceil(d.scrollTop*0.1);if(d.scrollTop==0)clearInterval(btn.timer,window.onscroll=set);},10);};functionset(){btn.style.display=d.scrollTop?'block':"none"}};BackTop('gotop');

もちろん、場所は「トップに戻る」の下に配置するのが最適です。この呼び出しメソッドはファイルパスがJSであることを前提としています。他の場所に配置する場合は、実際のパスに合わせて変更してください。

上記は一般的に使用されるいくつかの Web ページです

トップのコードに戻ります

、自分で変更して使用することができます。詳細については、

PHP 中国語 Web サイトで検索してください

~関連する推奨事項:

JavaScript シンプルリターン トップのコードとコメント

CSS-トップに戻る code_html/css_WEB-ITnose

jQuery_jquery で実装されたスマートな非表示とスライド効果のトップコードに戻る

以上がいくつかの一般的な Web ページのトップに戻るコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。