时间戳

首页 > 解决方案 > 如何使网站从顶部开始滚动，然后在向上滚动时停止在某个点

javascript - 如何使网站从顶部开始滚动，然后在向上滚动时停止在某个点

问题描述

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

<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>

标签： javascripthtmljquerycss

解决方案

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

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>

推荐阅读