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

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript 先頭に戻る効果 (自作コード)_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:44 PM

トップに戻る

最近ではトップに戻る効果を利用しているサイトも多いです。もちろん、面倒な方は#に直接リンクを貼っても効果は得られます。今日はネイティブ 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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

See all articles