JavaScript はブログ page_javascript スキルの右下隅に「トップに戻る」ボタンを実装します

ブログ ガーデンの多くのブロガーは、ブログのページの右下隅にアイコンを持っています。画面がどのように拡大されても、アイコンは常に右下隅に留まります。クリックしてページを上部に固定します。この効果を実現するために、後でデモを作成することを検討してください。

1. アイコンの右下隅が固定されます。

1.SS は 4 つのレイアウト方法を提供します。固定とは、絶対に配置された要素を意味します。したがって、アイコンの固定を実現するために、fixed を使用することを選択します。

テーブル>

2. コードは次のとおりです。 Button ボタンは常に画面の右下隅に配置されます。上下の精度バーをドラッグするか、ブラウザ ウィンドウのサイズを拡大するか。

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

#myTopBtn{
下: 5px;
右: 5px;
位置:固定;
}

2. クリック後、ページの上部隅に戻ります。

1. 画面の上隅に戻りたい場合は、JavaScript でスクロール メソッドとスクロール メソッドを使用してドラッグ バーを上下に移動する方法を知る必要があります。

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

window.scrollBy(0,-30) //画面を 30 ピクセル上に移動します
window.scroll(0,0) // 画面を上隅に戻します

2. ドラッグバーの移動方法は上で述べましたが、一定の速度でページの先頭まで移動させる方法です。次に、setInterval メソッドと clearInterval メソッドを使用して、10 ミリ秒ごとに画面を 30 ピクセルずつ上に移動する必要があります。

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

トップへ

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

var myVar;
関数 TopFunc(){
MyVar=setInterval(EachScrollBy,10); }
関数 EachScrollBy(eachHeight){

If(document.documentElement.scrollTop clearInterval(myVar);
}その他{
window.scrollBy(0,-30);
}
}

3. 拡張

ピン留めボタンを実装しました。では、ボタンをクリックすると画面が一番下に表示されることはどのようにしてわかるのでしょうか?実際、原理は同様なので、ここではデモは書きません。参考としていくつかの属性を提供します。

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

Web ページの表示領域の幅: document.body.clientWidth
Web ページの表示領域の高さ: document.body.clientHeight
Web ページの表示領域の幅: document.body.offsetWidth (側線の幅を含む)
Web ページの表示領域の高さ: document.body.offsetHeight (端の幅を含む)
Web ページ本文の全文幅: document.body.scrollWidth
Web ページ本文の完全なテキストの高さ: document.body.scrollHeight
スクロールされているページの高さ: 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

以上がこの記事の全内容です。ブログが大好きなお子様に気に入っていただければ幸いです。

絶対

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

静的な配置以外に、最初の親要素を基準にして配置される絶対配置要素を生成します。 要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

修正済み

ブラウザ ウィンドウを基準にして絶対配置された要素を生成します。 要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

相対

通常の位置を基準にして、相対的に配置された要素を生成します。 つまり、「left:20」は要素の LEFT 位置に 20 ピクセルを追加します。

静的

デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。

継承

は、position 属性の値が親要素から継承される必要があることを指定します。