问题描述
我的页面分为多个部分，每个部分都是屏幕尺寸的一个div（100％）。
每个部分都必须有一个按钮才能向下滚动全屏到下一个部分。
我能够向下滚动一个窗口，而无需完全了解我的工作以及如何继续滚动到每个给定部分的下一部分。
function nextButton() {
$('html, body').animate({
scrollTop: $(window).height()
}, 1000);
}
1楼
?ào Minh H?t
1
已采纳
2019-02-21 06:44:22
该参数scrollTop是通过计算从浏览器顶部到您要滚动到的点的高度确定的值。
在您提供的代码中，将$(window).height()向下滚动1个窗口高度，因此，如果要滚动到下一部分（我假设每个部分的高度等于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
2楼
varun agarwal
1
2019-02-21 06:45:21
定义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);
}
3楼
Jack Bashford
1
2019-02-21 06:46:09
您可以通过向每个div元素添加ID来使用jQuery平滑滚动：
$("html,body").animate({scrollTop: myDiv.offset().top}, "slow");
添加用于单击或滚动的事件侦听器，并将其用作事件处理程序，将为您提供所需的内容。
4楼
Mon
0
2019-02-21 06:50:23
尝试给每个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;
}