Показать сообщение отдельно
  #4 (permalink)  
Старый 21.12.2017, 01:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

скролл по блокам с помощью стрелок ↑ ↓
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>
Ответить с цитированием