如何使網站從頂部開始滾動，然后在向上滾動時停在某個點-有解無憂

我有一個網站，在重新設計的頂部有一個新的啟影片面和標題，我希望人們在加載頁面時看到。從那里，有一個按鈕箭頭，他們可以單擊以跳到下一部分（或者他們可以簡單地滾動，還沒有弄清楚如何禁用滾動選項，或者我是否想禁用該按鈕）。但是一旦他們向下滾動到主頁和部分，我不希望他們能夠向上滾動超過某個點再次看到它（除非頁面被重繪）。我遇到了這個小提琴和編碼，它似乎作業，但它開始在我想在初始滾動后停止它的高度，我不知道如何讓它在頁面頂部開始，然后在那個點停止向上滾動時。

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

uj5u.com熱心網友回復：

不太清楚您要實作的目標，但在下面的代碼段中添加了用于啟用和禁用滾動的按鈕，以及用于滾動到底部的按鈕

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/326186.html

標籤：javascript html 查询 css

上一篇：Ajax注冊后如何直接獲取記錄

下一篇：柏樹|在特定條件下單擊行內列中的按鈕