資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 CSS 中滾動到特定元素或跳過內容？
在訪問某些網站時，使用者可能需要跳過不相關的內容，直接跳轉到自己感興趣的內容，並且在 CSS 中有很多方法可以做到這一點。使用者可能希望點選一個按鈕或連結，將他們帶到同一頁面上的某個元素。使用者可能希望滾動到特定元素或能夠跳過內容。
在本文中，我們將瞭解如何在 CSS 中滾動到特定元素或跳過特定內容。
如何滾動到元素或內容？
有多種方法可以跳過內容，例如，我們可以使用 scroll-behaviour 屬性並將其值設定為 smooth，以便向上滾動可以平滑進行，但是使用此屬性不會讓我們對滾動有太多控制權，因為它只會使滾動平滑。我們可以像這樣使用 scroll-behaviour 屬性：
html{
scroll-behaviour: smooth;
}
我們還可以使用另一種方法，在這兩種方法中，我們都沒有關注特定元素，它們只是向上滾動。
<html>
<body>
<a id="to the top"> </a>
<a href="#top"> This will take you to the top of the page</a>
</body>
</html>
以上示例將帶您到頁面頂部，而不是特定元素。要跳到特定元素並跳過內容，讓我們看一個示例
示例
我們將要採用的方法是定位內容並建立一個容器，其中包含我們所有連結，並在 section 部分使用錨點標籤併為它們提供 id，以便錨點標籤可以指向它們。讓我們看看程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example for scrolling to an element</title>
<style>
.scroll-to {
position: absolute;
top: 1200px;
}
.scroll-btn {
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 20px;
background-color: blue;
color: white;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="content">
<h1>Page Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, metus in facilisis pellentesque, nulla orci tristique dolor, euismod malesuada augue massa ac dolor.</p>
<div class="scroll-to">
<h2>Scroll to me!</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, metus in facilisis pellentesque, nulla orci tristique dolor, euismod malesuada augue massa ac dolor.</p>
</div>
<a href="#" class="scroll-btn" onclick="scrollToTarget()">Scroll</a>
<script>
function scrollToTarget() {
var target = document.querySelector('.scroll-to');
target.scrollIntoView({behavior: 'smooth'});
}
</script>
</body>
</html>
在上面給出的程式碼的輸出中，將有一個標題“頁面內容”和在標題下編寫的文字內容，並且螢幕右下角會有一個寫著“滾動”的按鈕>您需要滾動到頁面底部，在那裡您將看到標題“滾動到我” 當您按下“滾動”按鈕時，頁面將自動將您帶到“頁面內容”。
示例
我們將要採用的方法是定位內容並建立一個容器，其中包含我們所有連結，並在 section 部分使用錨點標籤併為它們提供 id，以便錨點標籤可以指向它們。讓我們看看程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of scrolling to a particular element </title>
<style>
.con{
justify-content: space-between;
display: flex;
}
section:target {
border: solid blue 1px;
}
</style>
</head>
<body>
<div class="con">
<a href="#section1">Go to The Section 1</a>
<a href="#section2">Go to The Section 2</a>
</div>
<section id="section1">
<h2>This is Section 1</h2>
</section>
<section id="section2">
<h2>This is Section 2</h2>
</section>
</body>
</html>
在輸出中，您可以看到有兩個超連結，無論單擊其中的哪一個，該特定部分都會顯示藍色邊框，表明單擊超連結將把使用者帶到所需的元素。
結論
當用戶想要跳過與自己無關的內容時，他/她可能希望直接跳轉到自己感興趣的內容。使用錨點標籤並將它們指向特定部分的 id 向我們展示瞭如何滾動到特定元素。
在本文中，我們瞭解瞭如何使用 CSS 屬性滾動到特定元素或跳過內容。
386 次瀏覽
