Показать сообщение отдельно
  #2 (permalink)  
Старый 05.01.2017, 19:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

переход по клику к следующему обьекту
Адам,
пишите код сами, тогда меньше искать надо будет ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  article{
    height: 100px;
    background-color: #FF00FF;
     width: 300px;
     margin: 40px auto;
      color: #FFFFFF;
      text-align: center;
       line-height: 100px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    (function($) {
        $.fn.scrollTo = function(obj) {
            $("body, html").stop().animate({
                scrollTop: this.offset().top + (obj.offset||0)
            }, obj.speed, obj.easing, obj.callback);
            return this
        }
    })(jQuery);
    var article = $("article");
    article.slice(0, -1).each(function(indx, el) {
        var next = article.eq(++indx);
        $(el).on("click", function() {
            next.scrollTo({speed :600, offset : -8})
        })
    })
});
  </script>
</head>

<body>
<article data-next="1">
    <div>контент1</div>
</article>
<article data-next="1">
    <div>контент2</div>
</article>
<article data-next="1">
    <div>контент3</div>
</article>
<article data-next="1">
    <div>контент4</div>
</article>
<article data-next="1">
    <div>контент5</div>
</article>
<article data-next="1">
    <div>контент6</div>
</article>
<article data-next="1">
    <div>контент7</div>
</article>
<article data-next="1">
    <div>контент8</div>
</article>
<article data-next="1">
    <div>контент9</div>
</article>
<article data-next="1">
    <div>контент10</div>
</article>
<article data-next="1">
    <div>контент11</div>
</article>
<article data-next="1">
    <div>контент12</div>
</article>
<article data-next="1">
    <div>контент13</div>
</article>
<article data-next="1">
    <div>контент14</div>
</article>
<article data-next="1">
    <div>контент15</div>
</article>
<article data-next="1">
    <div>контент16</div>
</article>
<article data-next="1">
    <div>контент17</div>
</article>
<article data-next="1">
    <div>контент18</div>
</article>
<article data-next="1">
    <div>контент19</div>
</article>
<article data-next="1">
    <div>контент20</div>
</article>
<article data-next="1">
    <div>контент21</div>
</article>
<article data-next="1">
    <div>контент22</div>
</article>
<article data-next="1">
    <div>контент23</div>
</article>
<article data-next="1">
    <div>контент24</div>
</article>
<article data-next="1">
    <div>контент25</div>
</article>
<article data-next="1">
    <div>контент26</div>
</article>
<article data-next="1">
    <div>контент27</div>
</article>
<article data-next="1">
    <div>контент28</div>
</article>
<article data-next="1">
    <div>контент29</div>
</article>
<article data-next="1">
    <div>контент30</div>
</article>
<article data-next="1">
    <div>контент31</div>
</article>
<article data-next="1">
    <div>контент32</div>
</article>
<article data-next="1">
    <div>контент33</div>
</article>
<article data-next="1">
    <div>контент34</div>
</article>
<article data-next="1">
    <div>контент35</div>
</article>
<article data-next="1">
    <div>контент36</div>
</article>
<article data-next="1">
    <div>контент37</div>
</article>
<article data-next="1">
    <div>контент38</div>
</article>
<article data-next="1">
    <div>контент39</div>
</article>
<article data-next="1">
    <div>контент40</div>
</article>
<article data-next="1">
    <div>контент41</div>
</article>
<article data-next="1">
    <div>контент42</div>
</article>
<article data-next="1">
    <div>контент43</div>
</article>
<article data-next="1">
    <div>контент44</div>
</article>
<article data-next="1">
    <div>контент45</div>
</article>
<article data-next="1">
    <div>контент46</div>
</article>
<article data-next="1">
    <div>контент47</div>
</article>
<article data-next="1">
    <div>контент48</div>
</article>
<article data-next="1">
    <div>контент49</div>
</article>
<article data-next="1">
    <div>контент50</div>
</article>
</body>
</html>
Ответить с цитированием