水平手風琴鏈接點擊時向下滾動頁面底部

Question

我是一個絕對新手，所以請耐心等待。我在這裏閱讀了很多 的帖子，我認爲這可能與我的問題有關，但我很難理解所提供的解決方案。

我正嘗試用CSS創建一個點擊式水平手風琴。與Firefox它工作得很好。 Chrome和Safari出現問題。

問題是，每次點擊鏈接時，頁面幾乎都會滾動到頁面底部，您需要向上滾動以查看整個內容。鏈接看起來像這樣：

<h2><a href="#accordion1">title1</a></h2> 

不用說，這可能會非常惱人的用戶。我讀過的地方，這可以 使用JavaScript preventDefault()避免。我該如何解決這個問題？有什麼其他方法來防止這種情況？

Answer 1

編輯 - 看起來像preventDefault（）取消了所有的默認行爲（實際上有道理） - 我提出的第一個解決方案根本不是解決方案。

所以，這實際上證明很難做到。

經過一番搜索，我得出的結論是，如果不取消鏈接默認行爲（因此默認爲.preventDefault()），就不可能取消滾動。

你可以做的是回滾到鏈接滾動完成後你所在的位置，但即使你儘可能快地做到了，你仍然能夠看到瀏覽器上的卷軸 - 所以這是一個醜陋的解決方案。 （無論如何，你可以在這裏看到它 - http://jsfiddle.net/joplomacedo/RpDyc/）。

那麼，替代品？因爲當你這樣做的時候（我假設你在使用：target僞類），你仍然需要javascript，然後忘記：target stuff，並且只依靠javascript。它更簡單，更清潔，更少'哈克'。

以下是我會做（jQuery的） - >http://jsfiddle.net/joplomacedo/AfzJY/

如果您在使用CSS做不過堅持到底，那麼我建議你這樣做克里斯Coyier通過採取不優勢表明here：目標，但：檢查。自從他的文章做得非常好之後，我不會在這裏進一步發展。

編輯

之前，您使用jQuery？如果是的話所有你需要的是：

$('a[href="#accordion1"]').on('click', function (e) { 
    e.preventDefault(); 
}); 

如果你不使用jQuery那麼這裏就是如何使用純JavaScript做到這一點：

var cancels_links = document.getElementsByClassName('cancels-link'); 

var cancel = function cancel(e) { 
    e.preventDefault(); 
}; 

for (var i = 0, max = cancels_links.length; i < max; i++) { 
    cancels_links[i].addEventListener('click', cancel, false); 
} 

...這一個要求你添加class="cancels-link"給每個'a'元素誰是你想要取消的默認行爲。

這裏有兩個解決方案的小提琴 - >http://jsfiddle.net/cBQnv/3/