JavaScript 先頭に戻る効果 (自作コード)_JavaScript スキル-jsチュートリアル-php.cn

最近ではトップに戻る効果を利用しているサイトも多いです。もちろん、面倒な方は#に直接リンクを貼っても効果は得られます。今日はネイティブ JavaScript を使用して時間をかけて作成しました。私のスキルが限られているため、質問があればご指摘ください。
html コード:

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

🎜>js-トップに戻る

簡単な文書を作成するためのテキストエディタ。メモ帳はテキスト (.txt) ファイルの表示や編集に最も一般的に使用されますが、多くのユーザーはメモ帳が Web ページを作成するためのシンプルなツールであると考えています。

メモ帳は非常に基本的な形式のみをサポートしているため、プレーンテキストのままにする必要があるドキュメントに特殊な形式を保存できない場合があります。公開された Web ページでは特殊文字やその他の書式を表示できなかったり、エラーが発生したりする可能性があるため、Web ページ用の HTML ドキュメントを作成する場合に特に便利です。

メモ帳ファイルは、Unicode、ANSI、UTF-8、またはビッグエンディアン Unicode 形式で保存できます。これらの形式を使用すると、さまざまな文字セットのドキュメントを操作する際の柔軟性が高まります。

メモ帳は、簡単なドキュメントを作成するための基本的なテキストエディタです。メモ帳はテキスト (.txt) ファイルの表示や編集に最も一般的に使用されますが、多くのユーザーはメモ帳が Web ページを作成するためのシンプルなツールであると考えています。

トップに戻る
>

toTop.js コード

コードをコピーコードは次のとおりです: //最初のパラメータはボタン ID です。パラメーターはブール値です。true はボタンが常に表示されることを意味し、false はスクロール距離が 0 以外のときにボタンが表示されることを意味します

function toTop(id,show){

var oTop = document.getElementById(id) ; 
 var bShow = show; 
if(!bShow){ 
oTop.style.display = 'none'; 
setTimeout(btnShow,50); onclick = スクロールToTop; 
関数scrollToTop(){ 
varscrollTop = document.body.scrollTop || 
var iSpeed = Math.floor(-scrollTop/2); 🎜>if(scrollTop < ;= 0){ 
if(!bShow){ 
oTop.style.display = 'none'; 
} 
return; 
関数 btnShow(){ 
var スクロールトップ| document.body.scrollTop ; 
if(scrollTop oTop.style.display = 'none'; 
oTop.style.display = 'ブロック' ; 
} 
setTimeout(arguments.callee,50) 
} 
} 

 

注: 
position:fixed は無効ですIE6 では、互換性の詳細については、
ブラウザのさまざまなバグ
 をクリックしてください。また、以前、IE6 でのposition:fixed エラーの問題を解決する 
CSS という記事を書きました 
 が、この効果はサポートされていません。 

追記
: これらは、暇なときに JavaScript の知識に基づいて何気なく書いたエフェクトです。 

2 番目の方法 :
多くの Web ページ、特にページの下部にナビゲーションがない Web ページでは、「トップに戻る」ボタンが配置されます。これは訪問者に役立ちます。ナビゲーションをもう一度見つけるか、広告を再読してください (考えてみるととても美しいです)。近年JavaScriptが普及し、スライドエフェクトが随所に使われるようになったので、それに倣ってトップに戻る機能もスライドエフェクトにしました。その後、物理的特性に合わせて、減速スライド効果を持たせるように改良されました。まず原理について説明します。スクロールバーからページの上部までの距離を取得し、次にスクロールバーからページの上部までの距離を取得します。ページを移動し、一定の距離 (前回よりも少し小さく) を移動します。コードから始めましょう:

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

document.documentElement.scrollTop、document.body.scrollTop、window.scrollY は実際には同じですが、一部のブラウザでのみ機能します。どのブラウザでどれが動作するかについては、自分でデバッグできます。
使い方は？

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

TOP