Question

因此，我正在制作一个包含许多Divs且占用100％高度的网站。我想创建一个按钮，以便在单击该按钮时可以平滑滚动到下一个div。我已经对某些内容进行了编码，因此单击它时，它会滚动到特定的div。

$(".next").click(function() {
    $('html,body').animate({
        scrollTop: $(".p2").offset().top},
        'slow');
});

body{
  margin: 0;
  height: 100%;
}

.p1{
  height: 100vh;
  width: 70%;
  background-color: #2196F3;
}
.p2{
  height: 100vh;
  width: 70%;
  background-color: #E91E63;
}
.p3{
  height: 100vh;
  width: 70%;
  background-color: #01579B;
}

.admin{
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p1">
  
</div>
<div class="p2">
  
</div>
<div class="p3">
  
</div>

<div class="admin">
  
  <button class="next">NEXT</button>
  
</div>

Answer 1

要执行此操作，您需要标识当前显示的div。为此，您可以将一个类应用于当前显示的元素。然后，您可以使用next()遍历它们。

还要注意以下示例中，在所有元素.p上添加了一个通用类，以使CSS干燥并简化DOM遍历。

$(".next").click(function() {
  var $target = $('.p.active').next('.p');
  if ($target.length == 0)
    $target = $('.p:first');
    
  $('html, body').animate({
    scrollTop: $target.offset().top
  }, 'slow');

  $('.active').removeClass('active');
  $target.addClass('active');
});

body {
  margin: 0;
  height: 100%;
}

.p {
  height: 100vh;
  width: 70%;
}
.p1 {
  background-color: #2196F3;
}
.p2 {
  background-color: #E91E63;
}
.p3 {
  background-color: #01579B;
}

.admin {
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p p1 active"></div>
<div class="p p2"></div>
<div class="p p3"></div>
<div class="admin">
  <button class="next">NEXT</button>
</div>

Answer 2

为容器使用相同的类名。从第一个元素开始。每次单击定位下一个scroller元素

var f = $('.p1');
var nxt = f;
$(".next").click(function() {

  if (nxt.next('.scroller').length > 0) {
    nxt = nxt.next('.scroller');
  } else {
    nxt = f;
  }
  $('html,body').animate({
      scrollTop: nxt.offset().top
    },
    'slow');
});

body {
  margin: 0;
  height: 100%;
}

.p1 {
  height: 100vh;
  width: 70%;
  background-color: #2196F3;
}

.p2 {
  height: 100vh;
  width: 70%;
  background-color: #E91E63;
}

.p3 {
  height: 100vh;
  width: 70%;
  background-color: #01579B;
}

.admin {
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p1 scroller">

</div>
<div class="p2 scroller">

</div>
<div class="p3 scroller">

</div>

<div class="admin">

  <button class="next">NEXT</button>

</div>

Answer 3

这是一个基本版本，可以向前移动，并在到达最后一张幻灯片时环绕到开头。我们将currSlide存储在循环外部，并在函数内部内部增加数字。

为方便起见，我在每张幻灯片中添加了一个slide类，使我可以：

轻松计算幻灯片的长度
压缩CSS

let currSlide = 1;
const SLIDE_LENGTH = $('.slide').length;
$(".next").click(function() {
  currSlide = currSlide === SLIDE_LENGTH ? 1 : ++currSlide;
  $('html,body').animate({
      scrollTop: $(`.p${currSlide}`).offset().top
    },
    'slow');
});

body {
  margin: 0;
  height: 100%;
}

/* Less repetition */
.slide {
  height: 100vh;
  width: 70%;
}

.p1 {
  background-color: #2196F3;
}

.p2 {
  background-color: #E91E63;
}

.p3 {
  background-color: #01579B;
}

.admin {
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide p1"></div>
<div class="slide p2"></div>
<div class="slide p3"></div>

<div class="admin">
  <button class="next">NEXT</button>
</div>

jsFiddle

奖金编辑：

如果您有兴趣在某个时候添加上一个按钮...

let currSlide = 1;
const SLIDE_LENGTH = $('.slide').length;

function moveSlide() {
  currSlide = $(this).hasClass("next") ? ++currSlide : --currSlide;
  if (currSlide < 1) {
    currSlide = SLIDE_LENGTH;
  }
  if (currSlide > SLIDE_LENGTH) {
    currSlide = 1;
  }
  $('html,body').animate({
      scrollTop: $(`.p${currSlide}`).offset().top
    },
    'slow');
}

$(".prev, .next").on("click", moveSlide);

body {
  margin: 0;
  height: 100%;
}

/* Less repetition */

.slide {
  height: 100vh;
  width: 70%;
}

.p1 {
  background-color: #2196F3;
}

.p2 {
  background-color: #E91E63;
}

.p3 {
  background-color: #01579B;
}

.admin {
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0%;
  top: 0%;
  width: 30%;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide p1"></div>
<div class="slide p2"></div>
<div class="slide p3"></div>

<div class="admin">
  <button class="prev">PREVIOUS</button>
  <button class="next">NEXT</button>
</div>

jsFiddle

Answer 4

由于您的问题询问“如何使用Java脚本”，我将在几行普通JS中回答该问题：

var p = 1;
const container = document.getElementById('container');
var nextPage = function() {
  var topPos = document.getElementsByClassName('page')[p++].offsetTop;
  container.scrollTo({top: topPos, behavior: 'smooth'});
}

在上面的示例中，page是您分配给要滚动到的div的类名，例如：

<div id="container">
  <div class="page p1"></div>
  <div class="page p2"></div>
  <div class="page p3"></div>
</div>

由于要滚动整个浏览器窗口，因此只需替换

container.scrollTo({top: topPos, behavior: 'smooth'});

使用

window.scrollTo({top: topPos, behavior: 'smooth'});

像这样：

var p = 1;
var nextPage = function() {
  var topPos = document.getElementsByClassName('page')[p++].offsetTop;
  window.scrollTo({top: topPos, behavior: 'smooth'});
}

如果topPos位置不正确，您可以减去或增加要偏移的像素数

如何使用Javascript滚动到下一个div？

4 个答案: