jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

up

Browse source
This commit is contained in:
Ilya Kantor 2017-03-09 00:48:54 +03:00
parent d85be5f17b
commit fc84391bd2
143 changed files with 6874 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

94
2-ui/3-event-details/8-onscroll/2-updown-button/solution.md Normal file
View file

@ -0,0 +1,94 @@
Добавим в документ `DIV` с кнопкой:
```html
<div id="updown"></div>
```
Сама кнопка должна иметь `position:fixed`.
```css
#updown {
position: fixed;
top: 30px;
left: 10px;
cursor: pointer;
}
```
Кнопка является CSS-спрайтом, поэтому мы дополнительно добавляем ей размер и два состояния:
```css
#updown {
height: 9px;
width: 14px;
position: fixed;
top: 30px;
left: 10px;
cursor: pointer;
}
#updown.up {
background: url(...updown.gif) left top;
}
#updown.down {
background: url(...updown.gif) left -9px;
}
```
Для решения необходимо аккуратно разобрать все возможные состояния кнопки и указать, что делать при каждом.
Состояние -- это просто класс элемента: `up/down` или пустая строка, если кнопка не видна.
При прокрутке состояния меняются следующим образом:
```js
window.onscroll = function() {
var pageY = window.pageYOffset || document.documentElement.scrollTop;
var innerHeight = document.documentElement.clientHeight;
switch (updownElem.className) {
case '':
if (pageY > innerHeight) {
updownElem.className = 'up';
}
break;
case 'up':
if (pageY < innerHeight) {
updownElem.className = '';
}
break;
case 'down':
if (pageY > innerHeight) {
updownElem.className = 'up';
}
break;
}
}
```
При клике:
```js
var pageYLabel = 0;
updownElem.onclick = function() {
var pageY = window.pageYOffset || document.documentElement.scrollTop;
switch (this.className) {
case 'up':
pageYLabel = pageY;
window.scrollTo(0, 0);
this.className = 'down';
break;
case 'down':
window.scrollTo(0, pageYLabel);
this.className = 'up';
}
}
```

102
2-ui/3-event-details/8-onscroll/2-updown-button/solution.view/index.html Normal file
View file

@ -0,0 +1,102 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#matrix {
width: 400px;
margin: auto;
overflow: auto;
text-align: justify;
}
#updown {
height: 9px;
width: 14px;
color: green;
position: fixed;
top: 10px;
left: 10px;
cursor: pointer;
}
#updown.up::before {
content: '▲';
}
#updown.down::before {
content: '▼';
}
</style>
<meta charset="utf-8">
</head>
<body>
<div id="matrix">
<script>
for (var i = 0; i < 2000; i++) document.writeln(i)
</script>
</div>
<div id="updown"></div>
<script>
var updownElem = document.getElementById('updown');
var pageYLabel = 0;
updownElem.onclick = function() {
var pageY = window.pageYOffset || document.documentElement.scrollTop;
switch (this.className) {
case 'up':
pageYLabel = pageY;
window.scrollTo(0, 0);
this.className = 'down';
break;
case 'down':
window.scrollTo(0, pageYLabel);
this.className = 'up';
}
}
window.onscroll = function() {
var pageY = window.pageYOffset || document.documentElement.scrollTop;
var innerHeight = document.documentElement.clientHeight;
switch (updownElem.className) {
case '':
if (pageY > innerHeight) {
updownElem.className = 'up';
}
break;
case 'up':
if (pageY < innerHeight) {
updownElem.className = '';
}
break;
case 'down':
if (pageY > innerHeight) {
updownElem.className = 'up';
}
break;
}
}
</script>
</body>
</html>

41
2-ui/3-event-details/8-onscroll/2-updown-button/source.view/index.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#matrix {
width: 400px;
margin: auto;
overflow: auto;
text-align: justify;
}
</style>
<meta charset="utf-8">
</head>
<body>
Символы для стрелок: ▲ ▼
<div id="matrix">
<script>
for (var i = 0; i < 2000; i++) document.writeln(i)
</script>
</div>
<script>
// ... ваш код
// при необходимости, в документ можно добавить элементы и стили
</script>
</body>
</html>

20
2-ui/3-event-details/8-onscroll/2-updown-button/task.md Normal file
View file

@ -0,0 +1,20 @@
importance: 3
---
# Кнопка вверх-вниз
Создайте кнопку навигации, которая помогает при прокрутке страницы.
Работать должна следующим образом:
- Пока страница промотана меньше чем на высоту экрана вниз -- кнопка не видна.
- При промотке страницы вниз больше, чем на высоту экрана, появляется кнопка "стрелка вверх".
- При нажатии на нее страница прыгает вверх, но не только. Дополнительно, кнопка меняется на "стрелка вниз" и при клике возвратит на старое место. Если же в этом состоянии посетитель сам прокрутит вниз больше, чем один экран, то она вновь изменится на "стрелка вверх".
Должен получиться удобный навигационный помощник.
Посмотрите, как оно должно работать, в ифрейме ниже. Прокрутите ифрейм, навигационная стрелка появится слева-сверху.
[iframe border="1" height="200" link src="solution"]