Форум

malefikus13 · #1 (**permalink**) 28.09.2015, 11:48

Всем доброго дня!
Подскажите пожалуйста, как можно реализовать кнопку, при нажатии на которую будет производиться последовательный переход по якорям на странице?

Т.е. у меня имеется на странице 6 якорей.

<section id="link_1"></section>
<section id="link_2"></section>
<section id="link_3"></section>
<section id="link_4"></section>
<section id="link_5"></section>
<section id="link_6"></section>

И есть две кнопки - вверх и вниз

<div class="arrow_top"></div>
<div class="arrow_bottom"></div>

При нажатии на <div class="arrow_bottom"></div> смещение должно происходить последовательно по якорям вниз, т.е. сначала на link_1, потом на link_2 и т.д.
Следовательно при нажатии на <div class="arrow_top"></div> обратное действие.

Буду очень благодарен за помощь!

P.S. Вариант с шестью отдельными кнопками не подходит, нужно именно две - вверх и вниз.

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

ksa · #2 (**permalink**) 28.09.2015, 11:57

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

Подскажите пожалуйста, как можно реализовать кнопку, при нажатии на которую будет производиться последовательный переход по якорям на странице?

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

malefikus13 · #3 (**permalink**) 28.09.2015, 13:08

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

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

Ага, примерно вроде понял. А какой нибудь мини пример можете подсказать? Я просто только учусь и легче воспринимаю наглядно. Хоть в кратце. а дальше сам додумаю.

ksa · #4 (**permalink**) 28.09.2015, 13:11

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

А какой нибудь мини пример можете подсказать?

Тестовый пример, на котором можно что-то показывать, должен делать ты сам.

А там может и желающие показать что-то на нем появятся...

malefikus13 · #5 (**permalink**) 28.09.2015, 13:14

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

Тестовый пример, на котором можно что-то показывать, должен делать ты сам.

А там может и желающие показать что-то на нем появятся...

да, так - то я знаю это. Просто застопорился что-то. Ладно, спасибо за идею - буду мозговать ))

ksa · #6 (**permalink**) 28.09.2015, 13:20

malefikus13, т.е. тестовый пример делать не станешь...

malefikus13 · #7 (**permalink**) 28.09.2015, 13:30

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

malefikus13, т.е. тестовый пример делать не станешь...

Не-не)) Т.е. стану, но буду долго и нудно тупить глядя в монитор ))

hhh · #8 (**permalink**) 29.09.2015, 11:43

Решил вчера написать это дело. Мне помогают , почему бы и мне не помочь.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
   html,
   body {
     margin: 0;
     padding: 0;
   }
   html {
    font-size: 100%;
    line-height: 1.4;
   }
   body {
    font-family: 'Roboto', Verdana, sans-serif;
    color: #fff;
   }
   .way section {
     display: block;
     width: 100%;
     height: 100vh;
     padding: 10px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
   }
   .naver {
     width: 100%;
     position: fixed;
     top: 10px;
     left: 0;
   }
   .naver ul {
     margin: 0;
     padding: 0;
     position: absolute;
     top: 0px;
     left: calc(50% - 65px);
     list-style: none;
   }
   .naver ul li {
     display: inline-block;
     vertical-align: top;
   }
   .naver ul li a {
      color: #fff;
      border-radius: 5px;
      background: #31b0d5;
      border: 1px solid #269abc;
      display: inline-block;
      vertical-align: top;
      padding: 4px 17px;
      text-decoration: none;
      text-transform: capitalize;
   }
   .disabled {
     border-color: #C5C0C0 !important;
     background: #C5C0C0 !important;
     pointer-events: none;
     text-decoration: none;
   }
   .way section:nth-child(1) {
     background: #51AE51;
   }
   .way section:nth-child(2) {
     background: #9999FA;
   }
   .way section:nth-child(3) {
     background: #99FAD6;
   }
   .way section:nth-child(4) {
     background: #C7FA99;
   }
   .way section:nth-child(5) {
     background: #9AAA8B;
   }
   .way section:nth-child(6) {
     background: #EA8383;
   }


  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <!-- <script src="bower_components/jquery/dist/jquery.min.js"></script> -->

  <script>
  $(function () {

    var sect = {
      initialize: function () {
        sect.listeners();
      },

      goTop: $('#arrow_top'),
      goBot: $('#arrow_bot'),
      way: $('.way'),

      listeners: function () {
        sect.goBot.on('click', sect.moveBottom);
        sect.goTop.on('click', sect.moveTop);
      },

      moveBottom: function () {
        var forTarget$ = $('.active').next().attr('id');
        $(this).attr('href', '#' + forTarget$);
        var target$ = $(this).attr('href');

        $('html, body').animate({
          scrollTop : $(target$).offset().top
        }, 'slow');

        sect.way.children('section'+target$+'')
          .prev()
          .removeClass('active')
          .next()
          .addClass('active');

        if (!sect.way.children('section'+target$+'').is(':first-child')) {
          sect.goTop.removeClass('disabled');
        }
        if (sect.way.children('section'+target$+'').is(':last-child')) {
          sect.goBot.addClass('disabled');
        }

        return false;
      },

      moveTop: function () {
        var forTarget$ = $('.active').prev().attr('id');
        $(this).attr('href', '#' + forTarget$);
        var target$ = $(this).attr('href');

        $('html, body').animate({
          scrollTop : $(target$).offset().top
        }, 'slow');

        sect.way.children('section'+target$+'')
          .next()
          .removeClass('active')
          .prev()
          .addClass('active');

        if (!sect.way.children('section'+target$+'').is(':last-child')) {
          sect.goBot.removeClass('disabled');
        }

        if (sect.way.children('section'+target$+'').is(':first-child')) {
          $(this).addClass('disabled');
        }

        return false;
      }

    }
    sect.initialize();

  });

  </script>
</head>
<body>

  <nav class="naver">
    <ul>
      <li><a href="#" class="disabled" id="arrow_top">top</a></li>
      <li><a href="#" id="arrow_bot">bot</a></li>
    </ul>
  </nav>

  <div class="way">
    <section class="active" id="link_1">lorem1</section>
    <section id="link_2">lorem2</section>
    <section id="link_3">lorem3</section>
    <section id="link_4">lorem4</section>
    <section id="link_5">lorem5</section>
    <section id="link_6">lorem6</section>
  </div>

</body>
</html>

malefikus13 · #9 (**permalink**) 30.09.2015, 13:56

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

Решил вчера написать это дело. Мне помогают , почему бы и мне не помочь.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
   html,
   body {
     margin: 0;
     padding: 0;
   }
   html {
    font-size: 100%;
    line-height: 1.4;
   }
   body {
    font-family: 'Roboto', Verdana, sans-serif;
    color: #fff;
   }
   .way section {
     display: block;
     width: 100%;
     height: 100vh;
     padding: 10px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
   }
   .naver {
     width: 100%;
     position: fixed;
     top: 10px;
     left: 0;
   }
   .naver ul {
     margin: 0;
     padding: 0;
     position: absolute;
     top: 0px;
     left: calc(50% - 65px);
     list-style: none;
   }
   .naver ul li {
     display: inline-block;
     vertical-align: top;
   }
   .naver ul li a {
      color: #fff;
      border-radius: 5px;
      background: #31b0d5;
      border: 1px solid #269abc;
      display: inline-block;
      vertical-align: top;
      padding: 4px 17px;
      text-decoration: none;
      text-transform: capitalize;
   }
   .disabled {
     border-color: #C5C0C0 !important;
     background: #C5C0C0 !important;
     pointer-events: none;
     text-decoration: none;
   }
   .way section:nth-child(1) {
     background: #51AE51;
   }
   .way section:nth-child(2) {
     background: #9999FA;
   }
   .way section:nth-child(3) {
     background: #99FAD6;
   }
   .way section:nth-child(4) {
     background: #C7FA99;
   }
   .way section:nth-child(5) {
     background: #9AAA8B;
   }
   .way section:nth-child(6) {
     background: #EA8383;
   }


  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <!-- <script src="bower_components/jquery/dist/jquery.min.js"></script> -->

  <script>
  $(function () {

    var sect = {
      initialize: function () {
        sect.listeners();
      },

      goTop: $('#arrow_top'),
      goBot: $('#arrow_bot'),
      way: $('.way'),

      listeners: function () {
        sect.goBot.on('click', sect.moveBottom);
        sect.goTop.on('click', sect.moveTop);
      },

      moveBottom: function () {
        var forTarget$ = $('.active').next().attr('id');
        $(this).attr('href', '#' + forTarget$);
        var target$ = $(this).attr('href');

        $('html, body').animate({
          scrollTop : $(target$).offset().top
        }, 'slow');

        sect.way.children('section'+target$+'')
          .prev()
          .removeClass('active')
          .next()
          .addClass('active');

        if (!sect.way.children('section'+target$+'').is(':first-child')) {
          sect.goTop.removeClass('disabled');
        }
        if (sect.way.children('section'+target$+'').is(':last-child')) {
          sect.goBot.addClass('disabled');
        }

        return false;
      },

      moveTop: function () {
        var forTarget$ = $('.active').prev().attr('id');
        $(this).attr('href', '#' + forTarget$);
        var target$ = $(this).attr('href');

        $('html, body').animate({
          scrollTop : $(target$).offset().top
        }, 'slow');

        sect.way.children('section'+target$+'')
          .next()
          .removeClass('active')
          .prev()
          .addClass('active');

        if (!sect.way.children('section'+target$+'').is(':last-child')) {
          sect.goBot.removeClass('disabled');
        }

        if (sect.way.children('section'+target$+'').is(':first-child')) {
          $(this).addClass('disabled');
        }

        return false;
      }

    }
    sect.initialize();

  });

  </script>
</head>
<body>

  <nav class="naver">
    <ul>
      <li><a href="#" class="disabled" id="arrow_top">top</a></li>
      <li><a href="#" id="arrow_bot">bot</a></li>
    </ul>
  </nav>

  <div class="way">
    <section class="active" id="link_1">lorem1</section>
    <section id="link_2">lorem2</section>
    <section id="link_3">lorem3</section>
    <section id="link_4">lorem4</section>
    <section id="link_5">lorem5</section>
    <section id="link_6">lorem6</section>
  </div>

</body>
</html>

ух блин, спасибо тебе огромное! Вот выручил так выручил.

зашился на работе, только думал вернуться к задаче, а тут ты помог. Сейчас как раз разберу решение. Еще раз - низкий поклон!

рони · #10 (**permalink**) 30.09.2015, 16:42

malefikus13,
бесконечно в любую сторону и без якорей.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
   html,
   body {
     margin: 0;
     padding: 0;
   }
   html {
    font-size: 100%;
    line-height: 1.4;
   }
   body {
    font-family: 'Roboto', Verdana, sans-serif;
    color: #fff;

   }
   .way section {
     display: block;
     width: 100%;
     height: 100vh;
     padding: 10px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
   }
   .naver {
     width: 100%;
     position: fixed;
     top: 10px;
     left: 0;
   }
   .naver ul {
     margin: 0;
     padding: 0;
     position: absolute;
     top: 0px;
     left: calc(50% - 65px);
     list-style: none;
   }
   .naver ul li {
     display: inline-block;
     vertical-align: top;
      font-weight: bold;
   }
   .naver ul li{
      color: #fff;
      border-radius: 5px;
      background: #31b0d5;
      border: 1px solid #269abc;
      display: inline-block;
      vertical-align: top;
      padding: 4px 17px;
      text-transform: capitalize;
   }

   .way section:nth-child(1) {
     background: #51AE51;
   }
   .way section:nth-child(2) {
     background: #9999FA;
   }
   .way section:nth-child(3) {
     background: #99FAD6;
   }
   .way section:nth-child(4) {
     background: #C7FA99;
   }
   .way section:nth-child(5) {
     background: #9AAA8B;
   }
   .way section:nth-child(6) {
     background: #EA8383;
   }
  #arrow_top:after{
    content: "\21D1";
  }
   #arrow_bot:after{
    content: "\21D3";
  }
  </style>


</head>
<body>

  <nav class="naver">
    <ul>
      <li id="arrow_top"></li>
      <li id="arrow_bot"></li>
    </ul>
  </nav>

  <div class="way">
    <section >lorem1</section>
    <section >lorem2</section>
    <section >lorem3</section>
    <section >lorem4</section>
    <section >lorem5</section>
    <section >lorem6</section>
  </div>
<script>
var items =  document.querySelectorAll("section"), len = items.length;
 function fn(b) {
    var a = 0;
    return function(c) {
        "current" != c && (c ? (a--, 0 > a && (a = b - 1)) : (a = ++a % b));
        return a
    }
};
var fn = fn(len);

function fnShow(a)
{
   items[fn(a)].scrollIntoView();
   return false
}
document.querySelector("#arrow_top").addEventListener("click", function() {
  fnShow(true)
}, false);
document.querySelector("#arrow_bot").addEventListener("click", function() {
 fnShow(false)
}, false);
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript