Disable Scrolling Up After Point on Page

Question

I need to disable the ability to scroll up on an html page once I get beyond a certain point. I also need a mechanism for returning to the top of said page.

I've tried to accomplish this with the following code, but it hasn't worked for me yet because the page is responsive (thus the point's location may change with the window's size).

$(function() {
    var scrollPoint = 200;
    var scrolledPast = false;
    $(window).scroll(function() {
        $(window).scrollTop() > scrollPoint ? scrolledPast = true : '';
        $(window).scrollTop() < scrollPoint && scrolledPast == true ?     
        $(window).scrollTop(scrollPoint) : '';
    }).scroll();
});  

Can this be accomplished with Javascript/JQuery?

Answer 1

var minScroll = 200;
var scrollPoint = 0;

function setPage(id) {
  scrollPoint = $("#" + id).offset().top;
  document.location.href = "#" + id;
}

$(function() {
  $(window).on("scroll", function() {
    var current = $(window).scrollTop();
    if (scrollPoint >= minScroll) {
      if (current < scrollPoint) $(window).scrollTop(scrollPoint);
      else {
        //scrollPoint = $(window).scrollTop();
      }
    } else {
      //scrollPoint = $(window).scrollTop();
    }
  });

  $("#return").on("click", function() {
    scrollPoint = 0;
    $(window).scrollTop(0);
  });

  wave("page1");
  wave("page2");
  wave("page3");
});

function wave(id) {
  var maxWave = 30;
  var minWave = 2;

  for (var i = 0; i < 50; i++) {
    var waveSize = Math.floor(Math.random() * (maxWave - minWave) + minWave);
    var j = 0;

    for (j; j < waveSize; j++) {
      for (var k = 0; k < j; k++) {
        $("#" + id).append("#");
      }
      console.log(j + " vs " + waveSize);
      if (j == waveSize - 1) $("#" + id).append(")");
      else $("#" + id).append("\\");

      $("#" + id).append("<br />");
    }

    for (j = j - 2; j >= 0; j--) {
      for (var k = 0; k < j; k++) {
        $("#" + id).append("#");
      }
      $("#" + id).append("/<br />");
    }
  }
}

#return {
  position: fixed;
  top: 55px;
  right: 5px;
}
#pg1 {
  position: fixed;
  top: 75px;
  right: 5px;
}
#pg2 {
  position: fixed;
  top: 95px;
  right: 5px;
}
#pg3 {
  position: fixed;
  top: 115px;
  right: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="return">Return To Top</button>
<button id="pg1" onclick="setPage('page1');">Page 1</button>
<button id="pg2" onclick="setPage('page2');">Page 2</button>
<button id="pg3" onclick="setPage('page3');">Page 3</button>

<div id="page1">Page 1
  <br />
</div>
<div id="page2">Page 2
  <br />
</div>
<div id="page3">Page 3
  <br />
</div>