如何让一个网站从顶部开始滚动，但在滚动到某一点时停止

Question

我有一个网站，在其重新设计的顶部有一个新的启动屏幕和标题，我希望人们在加载页面时看到。从那里，有一个按钮箭头，他们可以点击跳转到下一个部分(或者他们可以简单地滚动，还不知道如何禁用滚动选项，或者如果我想在那个按钮)。但是，一旦他们向下滚动到主页和部分，我不希望他们能够滚动到过去的某个点再次看到它(除非页面被刷新)。我遇到了这个小提琴和编码，它似乎工作，但它开始的高度，我想在初始滚动后停止它，我不知道如何让它在页面顶部开始，然后在滚动时停止。

<div id="test"><div>

#test{
height: 3500px;
margin-top: 1000px;
}

$(document).ready(function(){
var eTop = $("#test").offset().top;
$(document).scrollTop(eTop);
var eHeight = $("#test").height();
var eBottom = eTop + eHeight - $(window).height();
$(document).on("scroll", function(e){
var windowScrollTop = $(window).scrollTop();
if(windowScrollTop < eTop){
console.log("not allowed");
$(document).scrollTop(eTop);
}
else if(windowScrollTop > eBottom){
$(document).scrollTop(eBottom);
}
else{
console.log("allowed");
}
});
});

虽然我认为另一个潜在的解决方案可能是在按钮本身。在点击之后，让它滚动，并基本上"锁定"页面的下部(在不让它向上滚动超过那个点)，虽然我不知道如何做到这一点。

<nav role="navigation" class="open">
<a href="#services" class="banner-btn"><img src="https://pluspng.com/img-png/down-arrow-png-down-icon-1600.png" alt="" height="100" width="100"></a>
</nav>

Answer 1

这不是很清楚你想要实现什么，但在下面的代码片段中添加了一个按钮来启用和禁用滚动和一个用于滚动到底部

function func() {
window.scrollTo({
top: 4500,
left: 0,
behavior: 'smooth'
});
};
function disableScroll() {
// Get the current page scroll position
scrollTop =
window.pageYOffset || document.documentElement.scrollTop;
scrollLeft =
window.pageXOffset || document.documentElement.scrollLeft,
// if any scroll is attempted,
// set this to the previous value
window.onscroll = function() {
window.scrollTo(scrollLeft, scrollTop);
};
}
function enableScroll() {
window.onscroll = function() {};
}

#test {
height: 3500px;
padding-top: 1000px;
}
.btnScroll {
position: fixed;
top: 0;
}
.btnDisable {
position: fixed;
right: 0;
top:0;
}
.btnEnable {
position: fixed;
right: 0;
bottom: 0;
}

<div id="test">Tester
<div>
<button onclick="func()" class="btnScroll">Scroll</button>
<button onclick="disableScroll()" class="btnDisable">Disable Scrolling</button>
<button onclick="enableScroll()" class="btnEnable">Enable Scrolling</button>

更新:

当到达滚动的最终目的地时，防止上部(或后面或前面…)滚动

function func() {
window.scrollTo({
top: 750,
left: 0
});
var previousPosition = window.pageYOffset || document.documentElement.scrollTop;
window.onscroll = function() {
var currentPosition = window.pageYOffset || document.documentElement.scrollTop;
if (currentPosition < 750) {
window.scrollTo(0, 750);
}
previousPosition = currentPosition;
};
};

#test {
height: 3500px;
padding-top: 1000px;
}
.btnScroll {
position: fixed;
bottom: 0;
right: 0;
}

<div id="test">Tester
<div>
<button onclick="func()" class="btnScroll"><img src="https://pluspng.com/img-png/down-arrow-png-down-icon-1600.png" alt="" height="20" width="20"></button>