При нажатии на div происходит переход к следующему от него
Пожалуйста, помогите. Обыскал весь интернет, нечего не нашел.
Нужно, чтобы при нажатии на элемент страница перематывалась к следующему элементу аналогичного id или класса. Такое реализовано тут: http://youcomedy.me/ Там при нажатии на картинку поста, страница перематывалась к следующему, словно как к якорю. <article data-next='1'> <div>контент</div> </article> <article data-next='1'> <div>контент</div> </article> |
переход по клику к следующему обьекту
Адам,
:cray: пишите код сами, тогда меньше искать надо будет ...
<!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>
|
Огромное спасибо)
|
| Часовой пояс GMT +3, время: 14:07. |