плавный скролл при нажатии на кнопки клавиатуры(вниз, вверх)
Добрый вечер, подскажите, а реально ли при нажатии на клаватуре кнопок вверх вниз, можно было попасть на нужный раздел страницы. Например, разделы:
1) О нас; 2) Наши практика; 3) Контакты; При нажатии на кнопку(стрелку) вниз плавно попадаем на раздел "Наши контакты" и т.д.
<body>
<div class="main">
<div class="about" style="height: 500px;">One</div>
<div class="practise" style="height: 400px;">Two</div>
<div class="contacts" style="height: 600px;">Three</div>
</div>
</body>
Заранее спасибо. |
Цитата:
|
я представлял это так(например для кнопки вниз):
сделать функцию с анимацией и скролом:
function animation(duration) {
var temp;
return function (sel) {
cancelAnimationFrame(temp);
var start = performance.now();
var from = window.pageYOffset || document.documentElement.scrollTop,
to = document.querySelector(sel).getBoundingClientRect().top;
requestAnimationFrame(function step(timestamp) {
var progress = (timestamp - start) / duration;
1 <= progress && (progress = 1);
window.scrollTo(0, from + to * progress | 0);
1 > progress && (temp = requestAnimationFrame(step))
})
}
}
var scrollPage = animation(500); после чего функцию
document.onkeydown = function (event) {
var event = event || window.event;
if (event.keyCode == 70 || event.keyCode == 70 || event.which == 70) {
//scrollPage(элемент к которому нужен прокрут)
}
};
но нет |
скролл по блокам с помощью стрелок ↑ ↓
JohnJohn,
кликнуть по примеру и нажать стрелку вниз или вверх.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{width:100%}
#d1{background:#00F;height:700px;border:1px solid}
#d2{background:#FF0;height:500px;border:1px solid}
#d3{background:#F0F;height:300px;border:1px solid}
#d4{background:#F00;height:600px;border:1px solid}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var b = $("div").get();
$(document).keyup(function(c) {
if (40 == c.keyCode || 38 == c.keyCode) {
b.sort(function(a, b) {
return Math.abs(a.getBoundingClientRect().top) - Math.abs(b.getBoundingClientRect().top);
});
var a = $("div").index(b[0]);
a = 40 == c.keyCode ? ++a : --a;
if (!(0 > a || a >= b.length)) {
$("body,html").stop().animate({scrollTop:"+=" + $("div")[a].getBoundingClientRect().top}, 800), !1;
}
}
});
});
</script>
</head>
<body>
<div id="d1" >1↑ ↓ </div>
<div id="d2" >2</div>
<div id="d3" >3</div>
<div id="d4" >4</div>
</body>
</html>
|
ты гений, спасибо! Перепишу потом на чистый джс, выложу сюда, мож кому пригодится.
|
Цитата:
|
Добрый, признаюсь честно, не совсем понимаю, как работает вот этот отрезок кода, index(b[0]) вернет 0? Сижу уже долго, не думается...
var a = $("div").index(b[0]);
a = 40 == c.keyCode ? ++a : --a;
if (!(0 > a || a >= b.length)) {
$("body,html").stop().animate({scrollTop:"+=" + $("div")[a].getBoundingClientRect().top}, 800), !1;
}
|
JohnJohn,
var a = $("div").index(b[0]);// условно a=2 третий блок ближе всего к верхней части окна
a = 40 == c.keyCode ? ++a : --a; если нажата стрелка вверх значит нужен индекс a = 1 второй блок
if (!(0 > a || a >= b.length)) { если блок таким индексом существует двигаемся к нему
$("body,html").stop().animate({scrollTop:"+=" + $("div")[a].getBoundingClientRect().top}, 800), !1;
}
|
Цитата:
|
var a = $("div").index(b[0]);
Я не могу разобраться с этой строчкой. Насколько я понимаю, событие срабатывает на каждый индекс массива из дивов, при этом, с каждым индексом выполняется эта часть кода
a = 40 == c.keyCode ? ++a : --a;
if (!(0 > a || a >= b.length)) {
$("body,html").stop().animate({
scrollTop: "+=" + $("div")[a].getBoundingClientRect().top
}, 800);
}
Но, как сделать на чистом джс, не могу додуматься, если делать через цикл, тогда оно сразу же проходит по всему циклу и возвращает последний элемент, что значит скролится в самый низ. |
Цитата:
|
Цитата:
если и куда-то можно втиснуть цикл, то это заменить сортировку циклом. так будет быстрее даже за счёт break. |
JohnJohn,
Задача №1. (по желанию)
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{width:100%}
#d1{background:#00F;height:700px;border:1px solid}
#d2{background:#FF0;height:500px;border:1px solid}
#d3{background:#F0F;height:300px;border:1px solid}
#d4{background:#F00;height:600px;border:1px solid}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var b = document.querySelectorAll("div");
document.addEventListener("keydown", function(e) {
for (var i=0; i < b.length; i++) {
//ваша задача остановить цикл на элементе который всех ближе к верху окна
}
alert(i + 1);
});
});
</script>
</head>
<body>
<div id="d1" >1↑ ↓ </div>
<div id="d2" >2</div>
<div id="d3" >3</div>
<div id="d4" >4</div>
</body>
</html>
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{width:100%}
#d1{background:#00F;height:700px;border:1px solid}
#d2{background:#FF0;height:500px;border:1px solid}
#d3{background:#F0F;height:300px;border:1px solid}
#d4{background:#F00;height:600px;border:1px solid}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var b = document.querySelectorAll("div");
document.addEventListener("keydown", function(e) {
for (var i=0; i < b.length; i++) {
if (window.pageYOffset < (b[i].getBoundingClientRect().top + window.pageYOffset)) break;
}
alert(i);
});
});
</script>
</head>
<body>
<div id="d1" >1↑ ↓ </div>
<div id="d2" >2</div>
<div id="d3" >3</div>
<div id="d4" >4</div>
</body>
</html>
|
JohnJohn,
:dance: |
JohnJohn,
только уберите лишнее из строки 25 |
не могу понять, что лишнее) break на 26 перенести?)
|
JohnJohn,
то что одинаково в сравнении, можно сократить, вычитанием из обоих частей сравнения. |
JohnJohn,
5 < y + 5 == 0 < y |
рони,
понял) ну как все напишу, там обязательно уберу, а так пусть будет, что бы людей не путать) спасибо |
| Часовой пояс GMT +3, время: 02:34. |