Question

我的页面分为几部分，每一部分都是屏幕尺寸的一个div（100％）。

每个部分都必须有一个按钮才能向下滚动全屏到下一个部分。

我可以向下滚动一个窗口，而无需完全了解我的工作，并且如何能够始终滚动到每个给定部分的下一部分。

function nextButton() {

  $('html, body').animate({
     scrollTop:  $(window).height() 
 }, 1000);


}

Answer 1

该参数scrollTop是通过计算从浏览器顶部到您要滚动到的点的高度确定的值。

在您提供的代码中，您向下滚动了1个窗口高度$(window).height()，因此，如果要滚动到下一部分（我假设每个部分的高度等于1个窗口），则需要将其相乘。

function scrollToSection(sectionNumber) {

  $('html, body').animate({
     scrollTop:  $(window).height() * sectionNumber 
 }, 1000);


}
// so if you want to scroll to your first section you call this
scrollToSection(1) // and so on

Answer 2

定义您的divs（例如：sections）的公共类

// Maintain the current div where the last scroll was performed
var index = 0;

function nextButton() {
  index += 1;
  var divSections = $('.sections');

  // Check to see if more divs exist
  if (!divSections[index]) return;

  $('html, body').animate({
     scrollTop:  divSections[index].offset().top
 }, 1000);


}

Answer 3

您可以通过向每个div元素添加ID来使用jQuery平滑滚动：

$("html,body").animate({scrollTop: myDiv.offset().top}, "slow");

添加用于单击或滚动的事件侦听器，并将其用作事件处理程序，将为您提供所需的内容。

Answer 4

尝试给每个div一个ID，然后您的按钮添加一个定位标记，并在您要定位的div中引用它。然后要对CSS产生动画效果，请添加滚动行为：平滑。

<div id="#section-one"></div>
<div id="#section-two"></div>
<a href="#section-one" class="button"/>
<div id="#section-three"></div>
<a href="#section-two" class="button"/>

html {
  scroll-behavior: smooth;
}

如何使用scrollTop？

4 个答案: