最近、Webサイトを開発するときにトップに戻るボタンを作成する必要がありますが、主にバックエンド用に開発していますが、フロントエンドではあまり熟練していません。オンライン情報クエリの後、トップに戻るボタンを作成しました。以下は、それを記録する2つの簡単な方法です。このウェブサイトが好きな友人はそれをブックマークでき、時々学習資料を更新します。
最初のタイプ：外部jQueryの引用新しいHTMLページを作成し、次のコードをコピーして保存し、ブラウザを介して開くと、効果がわかります。
<！doctype html> <html lang = en> <head> <meta charset = utf-8> <title> doc </title> <style> .arrow {border：9px solid透過; Border-Bottom-Color：＃3DA0DB;幅：0px;高さ：0px; TOP：0px} stick {width：8px;高さ：14px;ボーダーラジウス：1px;バックグラウンドカラー：＃3DA0DB;トップ：15px; } #back_top div {position：absolute;マージン：自動;右：0px;左：0px; } #back_top {background-color：#dddddd;高さ：38px;幅：38px;ボーダーラジウス：3px;表示：ブロック;カーソル：ポインター;位置：修正;右：50px;下：100px;表示：なし; } </style> </head> <body> <div id = article> </div> <div id = back_top> <div class = arrow> </div> <div class = stick> </div> <script src = http：//cdn.staticfile.org/jquery/1.11.11-rc2/jquery.min.js> </</< i = 0; i <100; i ++）{$（＃article）.append（<p> xxxxxxxxxx <br> </p>）}}}）</script> <script> $（function（）{$（）{windo）{function（）{// windollt = documented = documented = documente document.Scrolltop（スクロール> 200）{// $（＃back_top）フラッシュがあります}}）; $ back_top）.click（）{//タグをクリックすると、200ms。 }）; </script> </body> </html> 2番目のタイプ：CSSと特別なアイコンを使用して設定しますコード全体がシンプルで美しいです。上部ボタンに戻ります。上記と同じように、コードをHTMLファイルにコピーして開き、効果を確認します。
<！doctype html> <html lang = en> <head> <meta charset = utf-8> <title> doc </title> <style> #back_top {display：block;幅：60px;高さ：60px;位置：修正;下：50px;右：40px;ボーダーラジウス：10px 10px 10px;テキスト装置：なし;表示：なし;バックグラウンドカラー：＃999999; } #back_top span {display：block;幅：60px;色：#DDDDD;フォントサイズ：40px;テキストアライグ：センター;マージントップ：4px; } #back_topスパン：hover {color：#cccccc; } </style> </head> <body> <div id = article> </div> <a id = back_top href = script：;> <span>⌆</span> </a> </div> <script> $（function（）{for（var i = 0; i <100; i ++）{$（＃$）。 }}）</script> <script> $（function（）{$（window）.scroll（function（）{//ウィンドウスクロールがある限り、次のコードはvar scrollt = document.documentelement.scrolltop + document.body.scrolltop; $（back_top）.fadein（400）; $（html、body）.anime（{scrolltop：0px}、200））;}）; </script> </body> </html>上記の2つの方法はアイデアのみを提供し、直接使用できます。自分で必要なアイコンをデバッグできます。私はそれがすべての人の学習に役立つことを願っています、そして、私は誰もがwulin.comをもっとサポートすることを願っています。