How to make a website start scrolling from the top but then stop at a certain point when scrolling u-CodePudding

I have a website that has a new splash screen and header at the top in its redesign that I want people to see when they load the page. From there, there's a button arrow they can click to jump down to the next section (or they can simply scroll, haven't figured out how to disable the scroll option or if I want to on that button). But once they scroll down to the main page and section, I don't want them to be able to scroll back up past a certain point to see it again (unless the page is refreshed). I came across this fiddle and coding and it seems to work, but it STARTS at the height I wanna stop it up after the initial scroll and am not sure how to get it to START at the top of the page, then stop at that point when scrolling up.

<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");
        }
    });
});

Though I suppose another potential solution could be in the button itself. After its clicked, to have it scroll and essentially 'lock' the lower part of the page in place (in not letting it scroll back up beyond that point) though I'm not sure how to do that.

<nav role="navigation" class="open"> <a href="#services" class="banner-btn"><img src="https://mywebsite.net/something/random/images/down-arrow2.png" alt=""></a></nav>

CodePudding user response：

It not very clear of what you are trying to achieve but in the below snippet added button to enable and disable the scrolling and one for to scroll to the bottom

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>

Update:

To prevent upper (or back or previous ...something) scrolling when reached on final destination of scroll

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>