javascript - Onclick scroll to next div with a specific ID - Stack Overflow

admin管理员组

文章数量:1427168

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

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

<script src=".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>

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

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

<script src="https://ajax.googleapis./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>

Right here, I'm trying to make my window scroll to the next div with an id numbered with current id + 1.

I've tried window.scrollTo($('#'+next));.

But didn't work, then tried window.scrollTo($('#'+next), 500);.

But always returns to first div + 500px.

What is the proper way to handle that?

• javascript
• jquery

Share Improve this question Follow edited Oct 8, 2017 at 18:14 kyun 10.3k99 gold badges3535 silver badges7979 bronze badges asked Oct 8, 2017 at 18:04 AXAIAXAI 70666 silver badges2020 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

window.scrollTo(xpos, ypos) takes two parameters. The first one is coordinate along x-axis and second is along y-axis. So you can use 0 for first parameter and $('#'+next).offset().top for second parameter

$('.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./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>

I have done something like this which maybe helpfull for you check out.

HTML

<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>

CSS

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

JS

$(document).ready(function(){
  $('.mark').click(function(){;
    var y = $(this).outerHeight();
    var z =$(window).scrollTop();
    $('body').animate({scrollTop:z+y},800);
  });
});

You can check the demo here

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

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

<script src="https://ajax.googleapis./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>

This is the solution when you use data-number.

Actually, it's not perfect solution.

But I hope it help you.

$('.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./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>

本文标签： javascriptOnclick scroll to next div with a specific IDStack Overflow