如何在同一頁面上向下滾動并顯示章節？ -有解無憂

我正在開發一個單頁網站，當用戶點擊一個特定的按鈕時，應該向下滾動到頁面的另一個部分。

因為我使用了粘性標題，所以該部分的標題被隱藏在橫幅后面，所以我使用下面的代碼在點擊按鈕時顯示該部分。

但是，這將部分顯示在中間。我希望標題應該在頂部。請幫助我解決這個問題。

我的代碼：

<a onclick="rollToBottom()。 " id= "按鈕" class="btn ss- btn" data-animation="fadeInUp" data-delay=" 。 8s">閱讀更多</a>/span>
     <script type="text/javascript">/span>
        function scrollToBottom（）{
          var element = document.getElementById("readmore") 。
               window.scrollTo(0, element.offsetHeight)。
               }
      </script>

uj5u.com熱心網友回復：

我認為CSS屬性scroll-padding-top是你的答案。

uj5u.com熱心網友回復：

你有不同的選擇。

你有不同的選擇來解決這個問題

第一種方法是只使用HTML滾動到具有特定id

的元素。

顯示代碼片段

html{height:3000px; scroll-behavior: smooth;}
#readmore{position: absolute; top:2000px;}

< a href="#readmore">向下滾動</a> 
<h1 id="readmore">/span>
閱讀更多
</h1>/span>

第二種方法是使用scrollIntoView方法，將指定的元素滾動到瀏覽器視窗的可見區域。

顯示代碼片段

const element = document. getElementById("readmore") 。

document.getElementById('btn'/span>)。 addEventListener('click', () =>  {
  element.scrollIntoView（）。
})

html{height:3000px; scroll-behavior: smooth; }
#readmore{position: absolute; top:2000px;}

< button id="btn">向下滾動</button> 
<h1 id="readmore">/span>
閱讀更多
</h1>/span>

第三種方法是對我希望滾動的具體位置進行硬編碼，在這種情況下，我將其設定為2000px（高度）

顯示代碼片段

const element = document. getElementById("readmore") 。

document.getElementById('btn'/span>)。 addEventListener('click', () => {
    window.scrollTo(0, 2000) 。
})

html{height:3000px; scroll-behavior: smooth; }
#readmore{position: absolute; top:2000px;}

< button id="btn">向下滾動</button> 
<h1 id="readmore">/span>
閱讀更多
</h1>/span>

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

標籤：

上一篇：是否有辦法在gradle.build檔案中擴展或創建不同的jib配置？

下一篇：僅使用帶有鍵的unordered_map來存盤指標（忽略值）