天天看點

頁面回發後,讓頁面自動滾動到指定位置的一種簡單的方法

最近某客戶做實施,順便完善一下程式。突然找到了一個老問題的解決方法。

就是當使用者按一個按鈕後,希望回發後的頁面滾到一個指定的位置,而不是頁面的開頭部分。以前看過一篇文章介紹了一種方法,當時也沒有了解,也沒有記錄下來,現在又遇到了這個問題,還是自己想一個簡單點的方法吧。

博克園裡的“最新評論”裡的連結,點選後打開的頁面會直接滾動到指定的評論而不是文章一開始的位置。

那麼就用這種方法了,看了一下HTML代碼,發現有這一類的标簽

頁面回發後,讓頁面自動滾動到指定位置的一種簡單的方法

<a id="a001" href="#001" name="001"></a>

原來奧秘就在 name="001"這裡,在這裡作一個“标記”,然後單擊這個連接配接的時候就會自動滾動到這裡。

ok了,就是他了。那麼怎麼觸發這個js的單擊事件呢?很簡單,在頁面加載完畢之後執行這個js語句就可以了

document.getElementById("a001").click();

等等,并不是每一次看這個頁面都要自動滾動者這個标簽上呀,怎麼辦呢?這也好辦,再加一個标志就可以了。

我們再加一個文本框來記錄這個标志。

<asp:TextBox id="Txt_A" runat="server" Width="72px"></asp:TextBox>

頁面回發後,讓頁面自動滾動到指定位置的一種簡單的方法

function myLoad()

頁面回發後,讓頁面自動滾動到指定位置的一種簡單的方法
頁面回發後,讓頁面自動滾動到指定位置的一種簡單的方法
頁面回發後,讓頁面自動滾動到指定位置的一種簡單的方法

{

頁面回發後,讓頁面自動滾動到指定位置的一種簡單的方法

    var a = document.getElementById("Txt_A").value;

頁面回發後,讓頁面自動滾動到指定位置的一種簡單的方法

    if (a != "")

頁面回發後,讓頁面自動滾動到指定位置的一種簡單的方法
頁面回發後,讓頁面自動滾動到指定位置的一種簡單的方法
頁面回發後,讓頁面自動滾動到指定位置的一種簡單的方法
頁面回發後,讓頁面自動滾動到指定位置的一種簡單的方法

        document.getElementById("a001").click();

頁面回發後,讓頁面自動滾動到指定位置的一種簡單的方法

    }

頁面回發後,讓頁面自動滾動到指定位置的一種簡單的方法

}

當文本框裡有值的時候,我們就觸發這個事件,沒有值的話就不用了。

等等好像還有一個問題,如果在同一個頁面裡,需要根據不同的情況,跳到不同的位置怎麼辦呀。這個也簡單。

我們多做幾個 <a>标簽,标記多個位置,然後要跳到哪裡就把對應的 <a>标簽的ID放在文本框裡面。在稍微修改一下js函數就可以了。

頁面回發後,讓頁面自動滾動到指定位置的一種簡單的方法
頁面回發後,讓頁面自動滾動到指定位置的一種簡單的方法

        document.getElementById(a).click();

當然了,要在後置代碼裡面根據需求給文本框指派。

繼續閱讀