Форум

JohnJohn · #1 (**permalink**) 20.12.2017, 22:33

Добрый вечер, подскажите, а реально ли при нажатии на клаватуре кнопок вверх вниз, можно было попасть на нужный раздел страницы. Например, разделы:
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>

Заранее спасибо.

рони · #2 (**permalink**) 20.12.2017, 23:55

Сообщение от JohnJohn

реально ли

да

JohnJohn · #3 (**permalink**) 21.12.2017, 00:25

я представлял это так(например для кнопки вниз):

сделать функцию с анимацией и скролом:

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(элемент к которому нужен прокрут)
        }
    };

но нет

рони · #4 (**permalink**) 21.12.2017, 01:35

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&uarr; &darr; </div>
<div id="d2" >2</div>
<div id="d3" >3</div>
<div id="d4" >4</div>

</body>

</html>

JohnJohn · #5 (**permalink**) 21.12.2017, 02:47

ты гений, спасибо! Перепишу потом на чистый джс, выложу сюда, мож кому пригодится.

рони · #6 (**permalink**) 25.12.2017, 18:45

Сообщение от JohnJohn

Перепишу потом на чистый джс

как успехи с js?

JohnJohn · #7 (**permalink**) 26.12.2017, 23:14

Добрый, признаюсь честно, не совсем понимаю, как работает вот этот отрезок кода, 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;
      }

рони · #8 (**permalink**) 26.12.2017, 23:27

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;
    }

рони · #9 (**permalink**) 26.12.2017, 23:30

Сообщение от рони

getBoundingClientRect().top}, 800), !1;

красное выкинуть забыть, осталось от прежнего

JohnJohn · #10 (**permalink**) 27.12.2017, 19:40

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);
                    }

Но, как сделать на чистом джс, не могу додуматься, если делать через цикл, тогда оно сразу же проходит по всему циклу и возвращает последний элемент, что значит скролится в самый низ.

Форум

Справочник

Discord чат

Курсы javascript