我正在開發一個單頁網站,當用戶點擊一個特定的按鈕時,應該向下滾動到頁面的另一個部分。
因為我使用了粘性標題,所以該部分的標題被隱藏在橫幅后面,所以我使用下面的代碼在點擊按鈕時顯示該部分。
但是,這將部分顯示在中間。我希望標題應該在頂部。請幫助我解決這個問題。
我的代碼:
<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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
第二種方法是使用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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
第三種方法是對我希望滾動的具體位置進行硬編碼,在這種情況下,我將其設定為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>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/318697.html
標籤: