单击鼠标滚动到具有特定ID的下一个div

Question

＆＃13;

＆＃13;

$('.mark').click(function(){
  var id = $(this).attr('id');
  var next = (Number(id) + 1);
  window.scrollTo($('#'+next));
})

＆＃13;

.mark {
  height: 500px;
  color: white;
  background: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='marker'>
   <div class='mark' id='1'>Mark 1</div>
   <div class='mark' id='2'>Mark 2</div>
   <div class='mark' id='3'>Mark 3</div>
   <div class='mark' id='4'>Mark 4</div>
   <div class='mark' id='5'>Mark 5</div>
</div>

＆＃13;

＆＃13;

＆＃13;

就在这里，我试图让我的窗口滚动到下一个div，其中id编号为当前id + 1。

我已经尝试window.scrollTo($('#'+next));。

但没有工作，然后尝试window.scrollTo($('#'+next), 500);。

但总是返回第一个div + 500px。

处理这个问题的正确方法是什么？

Answer 1

window.scrollTo(xpos, ypos)有两个参数。第一个是沿x轴坐标，第二个是沿y轴坐标。因此，您可以将0用作第一个参数，将$('#'+next).offset().top用于第二个参数

$('.mark').click(function(){
  var id = $(this).attr('id');
  var next = (Number(id) + 1);
  //window.scrollTo(0, $('#'+next).offset().top);
  $('html, body').animate({scrollTop : $('#'+next).offset().top}, 2000);
})

.mark {
  height: 500px;
  color: white;
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='marker'>
   <div class='mark' id='1'>Mark 1</div>
   <div class='mark' id='2'>Mark 2</div>
   <div class='mark' id='3'>Mark 3</div>
   <div class='mark' id='4'>Mark 4</div>
   <div class='mark' id='5'>Mark 5</div>
</div>

Answer 2

我做过类似的事情，可能对你有所帮助。

HTML

Ls

CSS

<div class='marker'>
   <div class='mark' id='1'>Mark 1</div>
   <div class='mark' id='2'>Mark 2</div>
   <div class='mark' id='3'>Mark 3</div>
   <div class='mark' id='4'>Mark 4</div>
   <div class='mark' id='5'>Mark 5</div>
</div>

JS

.mark {
  height: 500px;
  color: white;
  background: black;
}

您可以查看demo here

Answer 3

＆＃13;

＆＃13;

$('.mark').click(function(){
  var id = $(this).attr('id');
  var next = (Number(id) + 1);
  location.href="#"+next;
});

＆＃13;

.mark {
  height: 500px;
  color: white;
  background: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='marker'>
   <div class='mark' id='1'>Mark 1</div>
   <div class='mark' id='2'>Mark 2</div>
   <div class='mark' id='3'>Mark 3</div>
   <div class='mark' id='4'>Mark 4</div>
   <div class='mark' id='5'>Mark 5</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用data-number时，这是解决方案。

实际上，这不是完美的解决方案。

但我希望它可以帮到你。

$('.mark').click(function(){
  var id = $(this).attr('data-number');
  var next = (Number(id) + 1);
  window.scrollTo(0, $(`.mark[data-number=${next}]`).offset().top);
});

.mark {
  height: 500px;
  color: white;
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='marker'>
   <div class='mark' data-number='1'>Mark 1</div>
   <div class='mark' data-number='2'>Mark 2</div>
   <div class='mark' data-number='3'>Mark 3</div>
   <div class='mark' data-number='4'>Mark 4</div>
   <div class='mark' data-number='5'>Mark 5</div>
</div>