Question

我想创建一个滚动到jquery中多个元素位置的按钮。

假设我有以下代码：

<div class="container">
  <div>This is div one.</div>
  <div>This is div two.</div>
  <div>This is div three.</div>
  <div>This is div four.</div>
  <div>This is div five.</div>
</div>

我可以像这样在jquery中创建一个事件：

$('button#divone').click(function(){
  $('body').scrollTop(/*Element pos*/);
});

但是，这意味着我必须为每个div创建一个按钮，并为每个div创建一个jquery事件。

还有更好的方法吗？

Answer 1

尝试一下：

$(document).ready(function(){

  var scrolled = 1;
  /*If you want it to start from the first div set the value to 0;*/
  
  var elements = $('div.container').find('div').length;
  
  /*Scroll Down button*/
  $('button#scrollbtn_D').click(function(){
    
    var pos = $('div.container div').eq(scrolled).offset().top;
      
    $('html,body').animate({
      scrollTop: pos},
    'slow');
      
    scrolled += 1;
    
    if(scrolled>=elements){
      $(this).hide();
    }
    
    $('button#scrollbtn_U').show();
  
  });
  
  /*Scroll Up button*/
  $('button#scrollbtn_U').click(function(){
    scrolled -= 2;
    var pos = $('div.container div').eq(scrolled).offset().top;

    $('html,body').animate({
      scrollTop: pos},
    'slow');
    
    scrolled += 1;
    
    if(scrolled==1){
      $(this).hide();
    }
    
    $('button#scrollbtn_D').show();
  
  });
  
  $('button#scrollbtn_U').hide();
  
});

div.container{
  width: 300px;
  height: auto;
  position: relative;
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.1);
}
div.container div{
  width: 100%;
  height: 300px;
  text-align: center;
}
button#scrollbtn_D{
  width:50px;
  height:50px;
  position: fixed;
  top: 8px;
  left:340px;
  cursor: pointer;
}
button#scrollbtn_U{
  width:50px;
  height:50px;
  position: fixed;
  top: 8px;
  left:395px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

  <div>This is div one.</div>
  <div>This is div two.</div>
  <div>This is div three.</div>
  <div>This is div four.</div>
  <div>This is div five.</div>

</div>
<button id="scrollbtn_D">Down</button>
<button id="scrollbtn_U">Up</button>

Answer 2

您可以使用此功能滚动到一个元素。

 function scrollTo(elem){
   $([document.documentElement, document.body]).animate({
    scrollTop: elem.offset().top
   }, 2000);
 }

html, body{
  height: 2000px;
} 

div.block{
  width: 100px; 
  height: 100px; 
  border: 1px solid black;
  margin: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Scroll To Div Number (1-11):
<input type="number" id="num"/><p/>
<button onClick="scrollToDiv()">Scroll</button>
<div class = "block" id="1">
1
</div>
<div class = "block" id="2">
2
</div>
<div class = "block" id="3">
3
</div>
<div class = "block" id="4">
4
</div>
<div class = "block" id="5">
5
</div>
<div class = "block" id="6">
6
</div>
<div class = "block" id="7">
7
</div>
<div class = "block" id="8">
8
</div>
<div class = "block" id="9">
9
</div>
<div class = "block" id="10">
10
</div>
<div class="block" id="11">
11
</div>
<script>
function scrollTo(elem){
       $([document.documentElement, document.body]).animate({
        scrollTop: elem.offset().top
       }, 2000);
}
function scrollToDiv(){
  var num = $('#num').val();
  if(num.trim().length&&parseFloat(num)>0&&parseFloat(num)<12&&document.getElementById(num)){
  scrollTo($('#'+num));
  }
}
</script>

滚动按钮滚动到多个元素位置

2 个答案: