У многих блоггеров в парке блога есть значок в правом нижнем углу страницы в блоге. Независимо от того, как растягивается экран, он всегда остается в правом нижнем углу. Нажмите на страницу вверх. Давайте подумаем о написании демонстрации для достижения этого эффекта позже.
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 миллисекунд.
Кода -копия выглядит следующим образом:
<тело>
<div id = "mydiv">
</div>
<button id = "mytopbtn" onclick = "topfunc ()"> до top </button>
</body>
Кода -копия выглядит следующим образом:
var myvar;
функция topfunc () {
myvar = setInterval (wannscrollby, 10);
}
Функция wanscrollby (earlyheight) {
if (document.documentelement.scrolltop <= 0) {
ClearInterval (myvar);
}еще{
window.scrollby (0, -30);
}
}
Iii. Расширять
Верхняя кнопка реализована. Итак, как мы реализуем кнопку, нажмите на нижний экран? На самом деле, принцип похож, поэтому мы не будем писать демо здесь. Предоставьте некоторые атрибуты для справки.
Кода -копия выглядит следующим образом:
Ширина видимой области веб -страницы: document.body.clientwidth
Высокая высота видимой области веб -страницы: document.body.clientheight
Ширина видимой области веб -страницы: document.body.offsetwidth (включая ширину линии края)
Высота видимой области веб -страницы: document.body.offsetheight (включая ширину линии края)
Полная ширина текста веб -страницы: document.body.scrollwidth
Полный текст веб -страницы: document.body.scrollheight
Веб -страница развернута на высоком уровне: document.body.scrolltop
Левая от веб -страницы развертывается: document.body.scrollleft
В основной части веб -страницы: window.creentop
Слева от основного текста веб -страницы: window.screenleft
Высокое разрешение экрана: window.screen.height
Ширина разрешения экрана: window.screen.width
Доступная экрана высота рабочего пространства: window.screen.availeheight
Экран доступная ширина рабочей области: window.screen.availWidth
Вышеуказанное - все содержание этой статьи. Я надеюсь, что детская обувь, которые любят играть в блоги, подобные им.