1. 程式人生 > >點選連結按鈕後頁面總是自動滾動至頂部的解決方法

點選連結按鈕後頁面總是自動滾動至頂部的解決方法

最近在開發一個小web的時候想給一個按鈕增加一個彈出dialog功能,但是發現點選按鈕後頁面總是自動滾動至頂部,這點從使用者體驗上來講是極其不爽的,於是開始跳進google大池尋求解決辦法。網上的辦法有很多,但是唯獨下面這個生效了,轉來收藏。

    " 平時開發的HTML表單,連結通常會使用Open new window控制元件,但這種方法如果是連結到本頁面,用來執行一段JS指令碼的話,我們一般不希望使用者在點解連結後頁面滾動到頂部(如果 有滾動條的話),可以通過修改上述將連結屬性href來實現:即將href="#"改為href="###",這樣使用者點選連結執行JS指令碼後,滾動條就不會自動跳到TOP了。"

     後 來就想為什麼這麼改了就不跳了?然後把href換成 "#X",發現依然可以實現阻止滾動的效果。所以應該是瀏覽器會把 "#" 當作是一種頁面跳轉的口令,接到這個口令就會把頁面滾動到原始位置,但是隻要把這個改成瀏覽器沒有辦法識別的名稱,那麼它就會把這個口令ignore了。

NOTE:後來發現IE6這個神奇的瀏覽器連"##"都能識別,所以如果你要相容瀏覽器,那還是用"###"吧。。。

2010-10-11 更新

在最近開發的網站中,一直使用上述的"#X"方法解決頁面跳動的問題。但是這樣解決頁面雖然不跳了,url卻會變得異常的難看,所以一直想找個方法替代它。後來在一次山寨之旅中意外的找到了它——

                            href="javascript:void(0)"

 url從此乾淨了~~

除此方法之外還有提出:

定位到 上,document.getElementsByTagName_r( "html ")[0].style.overflow= "hidden "
或者
然後呼叫地方寫document.getElementByIdx_x( "scroll ").style.overflow= "hidden "

但是依次方法並未成功,也可能是我寫的不對,這個留作以後再做驗證。

本文轉自:http://dbear.iteye.com/blog/750825