アイデア: クリック後に先頭に戻るボタンを実装するには、まずコンテナを作成し、そのスタイル {overflow: auto} を設定する必要があります。次に、スクロール イベントをリッスンするリスナーをコンテナに追加する必要があります。コンテナのscrollTopが特定の値より大きい場合、ボタンが表示されます。最後に、このボタンにリスナーを追加し、ボタンがクリックされたときにコンテナーのscrollTopを0に設定します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>返回顶部示例</title>
<style>
.scroll-container {
height: 300px;
overflow: auto;
border: 1px solid #ccc;
}
.content {
height: 600px;
background-color: #f0f0f0;
}
.scroll-btn {
margin-top: 10px;
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
.visible {
display: block;
}
.invisible {
display: none;
}
</style>
</head>
<body>
<div id="scrollContainer" class="scroll-container">
<div id="content" class="content">
<!-- 长内容 -->
</div>
</div>
<button id="scrollToTopBtn" class="scroll-btn invisible">返回顶部</button>
<script>
const scrollContainer = document.getElementById('scrollContainer');
const content = document.getElementById('content');
const scrollToTopBtn = document.getElementById('scrollToTopBtn');
scrollContainer.addEventListener('scroll', () => {
const scrollTopPosition = scrollContainer.scrollTop;
if (scrollTopPosition > 100) {
scrollToTopBtn.classList.remove('invisible');
} else {
scrollToTopBtn.classList.add('invisible');
}
});
scrollToTopBtn.addEventListener('click', () => {
scrollContainer.scrollTop = 0;
});
</script>
</body>
</html>
コードにはいくつかの重要な属性があります。詳しく知りたい方は、ここにいくつかのリンクを提供します。
スクロールトップ、クライアントハイトおよびスクロールハイト スクロールトップ、クライアントハイトおよびスクロールハイト
getBoundingClientRect() 要素.getBoundingClientRect()
要素.scrollTo( )