Safari - Javascript - 隱藏/顯示div會導致滾動條被重置

我有一個包含一系列問題和解答的HTML文檔。Safari - Javascript - 隱藏/顯示div會導致滾動條被重置

每個問題都包含在一個div中。每個答案都包含在一個div中。每個答案都有一個唯一的ID。

爲了最初隱藏元素，每個Answer的CSS樣式設置爲'none'。

當點擊一個問題，在div經過相應的答案的該功能的ID：（該切換應答div的外觀）

function toggle(id) { 
    var state = document.getElementById(id).style.display; 
    if (state == 'block') { 
     document.getElementById(id).style.display = 'none'; 
    } else { 
     document.getElementById(id).style.display = 'block'; 
    } 
}

問題：如果滾動條處於默認（頂部）位置，此機制在Safari中運行良好。否則，這將導致滾動條重置爲默認位置，從而有效地破壞了此機制在長頁面上的實用性。

問：有什麼辦法可以防止滾動條位置被重置嗎？

謝謝。

來源

2011-04-11 SirRatty

**焦點**：'getElementById'不是免費的操作。在你的'toggle'功能中推薦你只查看一次元素，而不是兩次。 – 2011-04-11 04:13:59

偶然點擊「」這個問題嗎？ – 2011-04-11 04:14:59

@mu太短：這也是我的想法。 – 2011-04-11 04:17:11

你說你正在使用

<a href='#'>...</a>

...的提問。這是問題，這是一個鏈接，告訴瀏覽器進入頁面的頂部。你有幾個選項修正它：

掛鉤的click事件的鏈接（或其母公司等）上，並取消默認動作。你如何做到這一點取決於你如何掛鉤事件。這聽起來像你已經掛鉤事件，所以這可能是最簡單的解決方案。如果您使用onclick=樣式鉤子，return false;不在您的處理函數中。如果您使用的是addEventListener，則在event上使用 preventDefault。（你大概已經知道IE的大多數版本不支持addEventListener，而是attachEvent;你如何防止默認值也是不同的，這就是爲什麼我使用類庫jQuery,Prototype,YUI,Closure，或any of several others平滑過度瀏覽器的差異）
使用javascript:僞協議，而不是#，例如：
```
<a href='javascript:;'>...</a> 
```
僞協議告訴運行在href ELE腳本代碼的瀏覽器換貨。在上面，代碼只是一個;（語句終結符），它什麼都不做。你可以，當然有它觸發toggle功能：
```
<a href='javascript:toggle("foo");'>...</a> 
```
不要使用a可言。是否適合使用取決於它是否在概念上是鏈接，這完全是您的呼叫。

來源

2011-04-11 04:52:30

謝謝你。因爲我們也有鏈接，所以我們去了（2），它的工作很好。乾杯。 – SirRatty 2011-04-11 05:51:39

Safari - Javascript - 隱藏/顯示div會導致滾動條被重置

回答

相關問題