你可以使用 JavaScript 結合錨點，並在捲動時進行 -150px 的調整，來實現按下按鈕後平滑捲動到指定位置的效果。這裡是具體的範例程式碼：
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Scroll Example</title>
<style>
section {
height: 800px;
}
</style>
</head>
<body>
<button id="scrollBtn">平滑捲動到錨點</button>
<section></section>
<section id="targetSection" style="background-color: lightgray;">
<h2>這是目標區域</h2>
</section>
<section></section>
<script>
document.getElementById('scrollBtn').addEventListener('click', function() {
const targetElement = document.getElementById('targetSection');
const offset = -150; // 偏移 -150 px
// 獲取目標元素的位置
const elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
// 平滑捲動到目標位置 - 150 px
window.scrollTo({
top: elementPosition + offset,
behavior: 'smooth'
});
});
</script>
</body>
</html>
說明：
- 按鈕
<button id="scrollBtn"> 會觸發平滑捲動事件。
- JavaScript 中使用
getBoundingClientRect() 獲取目標元素的位置，並加上 window.pageYOffset 來考慮當前捲動的位移。
window.scrollTo() 使用 top 來設定捲動目標，加上你希望的 -150px 偏移。behavior: 'smooth' 用於確保捲動是平滑的。
這樣當你按下按鈕時，頁面會平滑捲動到指定的區域，並且會有 -150px 的調整。