HTML超鏈接#號導致頁面跳轉首頁問題：錨點機制與阻止默認行為方案

問題現象

在JSP頁面使用<a href="#mymodal">觸發模態框顯示，點擊後頁面意外跳轉到首頁或頂部，URL變為https://domain.com/#mymodal。

根因：瀏覽器默認錨點行為

• href="#"或href="#id"屬於片段標識符，瀏覽器默認嘗試定位到id="mymodal"的元素
• 若目標元素不存在、被遮擋、或在動態加載中未就緒，瀏覽器回退到頁面頂部（視為#top）
• 單頁應用（SPA）路由模式下，#常被路由庫攔截導致導航跳轉

解決方案對比

方案一：javascript:void(0) 阻止導航（最常用）

<a href="javascript:void(0);" onclick="showModal('mymodal')">打開模態框</a>

優點：兼容性最好、無需JS阻止默認行為
缺點：語義不純、Content Security Policy (CSP) 可能阻止內聯JS、無法被搜索引擎識別為鏈接

方案二：event.preventDefault() 標準阻止（推薦）

<a href="#mymodal" id="modalTrigger">打開模態框</a>

<script>
document.getElementById('modalTrigger').addEventListener('click', function(e) {
    e.preventDefault();  // 阻止默認跳轉
    showModal('mymodal'); // 業務邏輯
});
</script>

優點：語義正確（保留href指向目標）、符合CSP、可訪問性好、便於SEO
缺點：需確保JS加載執行在用戶點擊前

方案三：CSS :target 選擇器實現無JS模態框（純CSS方案）

<style>
.modal { display: none; }
.modal:target { display: block; }
</style>

<a href="#mymodal">打開</a>
<div id="mymodal" class="modal">
    <a href="#">關閉</a>  /* href="#" 回退關閉 */
    內容...
</div>

優點：零JS依賴、極簡實現、性能最優
缺點：功能受限（無動畫、無遮罩層邏輯、歷史記錄污染）

方案四：Bootstrap/jQuery模態框標準用法

<!-- Bootstrap 5 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#mymodal">
    打開模態框
</button>

<div class="modal fade" id="mymodal" tabindex="-1">...</div>

使用button而非a標籤，從源頭避免錨點問題，符合語義（觸發動作而非導航）。

JSP模板整合建議

若使用模板引擎（如Thymeleaf、Freemarker），統一封裛宏：

<!-- Thymeleaf片段 -->
<a th:href="@{#}" th:onclick="|showModal('${modalId}')|" th:text="${text}"></a>

調試檢查清單

1. 目標元素id="mymodal"是否存在且唯一？
2. 元素是否display: none或被z-index遮擋？
3. 是否有全局a標籤點擊攔截器（如SPA路由）？
4. CSP策略是否允許javascript:協議？

總結

語義正確的做法：保留href="#target"，用e.preventDefault()阻止默認行為。若項目允許，優先使用<button>配合框架數據屬性（data-bs-target），徹底規避錨點副作用。