ブログパークの多くのブロガーには、ブログのページの右下隅にアイコンがあります。画面がどのように伸びていても、常に右下隅にとどまります。ページをクリックして上にします。後でこの効果を達成するためにデモを書くことを考えてみましょう。
1.アイコンの右下隅が固定されています。
1。SSは4つのレイアウト方法を提供します。固定は絶対的な位置決め要素を表します。そのため、アイコンの固定を実現するために固定を使用することを選択しました。
| 絶対 | 静的位置決め以外の最初の親要素に比べて位置付けられた絶対に配置された要素を生成します。 要素の位置は、「左」、「上」、「右」、「下」属性によって指定されます。 |
| 修理済み | ブラウザウィンドウに比べて位置付け、絶対に配置された要素を生成します。 要素の位置は、「左」、「上」、「右」、「下」属性によって指定されます。 |
| 相対的 | 通常の位置に比べて配置された比較的配置された要素を生成します。 したがって、「左：20」は、要素の左の位置に20ピクセルを追加します。 |
| 静的 | デフォルト値。位置はありません。要素は通常のストリームに表示されます（上部、下、左、右、またはZインデックス宣言を無視します）。 |
| 継承 | 位置属性の値を親要素から継承する必要があることを指定します。 |
2。コードは次のとおりです。ボタンボタンは、常に画面の右下隅に配置されます。上部および下部の精密バーをドラッグしている場合でも、ブラウザのウィンドウサイズを伸ばしている場合でも。
コードコピーは次のとおりです。
#mytopbtn {
下：5px;
右：5px;
位置：修正;
}
2。クリックした後、ページの上隅に戻ります。
1.画面の上隅に戻るには、JavaScriptを使用してドラッグバーの上下の動きを操作する方法を理解する必要があります。 JavaScriptは、ScrollbyおよびScrollメソッドを提供します。
コードコピーは次のとおりです。
window.scrollby（0、-30）// 30ピクセルを画面に移動します
window.scroll（0,0）//画面は上隅に戻ります
2。上記のドラッグバーの移動方法であるため、特定の速度でページの上部に移動する方法。次に、SetIntervalおよびClearIntervalメソッドを使用する必要があります。これにより、30ピクセルを10ミリ秒未満で画面に移動できます。
コードコピーは次のとおりです。
<body>
<div id = "mydiv">
</div>
<button id = "mytopbtn" onclick = "topfunc（）"> to top </button>
</body>
コードコピーは次のとおりです。
var myvar;
function topfunc（）{
myvar = setInterval（各scrollby、10）;
}
clustice各scrollby（各ハイト）{
if（document.documentelement.scrolltop <= 0）{
ClearInterval（myvar）;
}それ以外{
window.scrollby（0、-30）;
}
}
iii。拡大する
上部ボタンが実装されています。では、ボタンをクリックするボタンの画面をどのように実装しますか？実際、原則は似ているので、ここでデモを書くことはありません。参照のためにいくつかの属性を提供します。
コードコピーは次のとおりです。
Webページの可視領域幅：document.body.clientwidth
Webページの目に見える領域の高さ：document.body.clientheight
Webページの可視領域幅：document.body.offsetwidth（エッジラインの幅を含む）
Webページの目に見える領域の高さ：document.body.offseTheigh（エッジラインの幅を含む）
Webページの全文幅：document.body.scrollwidth
Webページの全文：document.body.scrollheight
Webページは高レベルで展開されています：document.body.scrolltop
展開されているWebページの左：document.body.scrollleft
Webページの主要部分：window.screentop
Webページのメインテキストの左：window.screenleft
高画面解像度：window.screen.height
画面解像度の幅：window.screen.width
画面利用可能なワークスペースの高さ：window.screen.availheight
画面利用可能なワークスペース幅：window.screen.availwidth
上記は、この記事のコンテンツ全体です。私は、そのようなブログを演奏するのが大好きな子供用の靴を願っています。