如何在執行我的jquery代碼時修復瀏覽器

Question

我的一個項目網頁太冗長了。 所以我決定在一個按鈕上添加一小段jQuery代碼：

 <a class="button" align="center" href="#"><div id="clickMe">Show me!.</div>

當用戶按下此按鈕時，將完全顯示網頁。 這是jQuery代碼：

<script>
$(document).ready(function(){
    $("#clickMe").click(function(){
        $("img").fadeIn(1000);
        $("#picFrame").slideToggle();
    });
});

我正在使用此代碼隱藏頁面的顯示部分

<div id="picFrame">
Bla bla goes here
</div>

當用戶按下顯示更多按鈕時，將顯示內容。

但問題是該內容顯示在頁面底部。 當用戶點擊此按鈕時，瀏覽器將自動再次向上滾動到標題。 用戶必須向下滾動才能看到內容。 我想避免這種情況。

用戶提交后，需要將瀏覽器修復到之前瀏覽器所在的位置。 應該執行jQuery並顯示內容。 有任何想法嗎？。

Answer 1

jQuery JSFiddle

這是因為你有href='#'將它發送到頁面頂部。

你可以做href=''所以它不會去任何地方，或者在你的jQuery中，有這個：

$(document).ready(function(){
    $("#clickMe").click(function(e){
        $("img").fadeIn(1000);
        $("#picFrame").slideToggle();
        e.preventDefault();
    });
});

e.preventDefault(); 將阻止它跳轉到頁面頂部。 確保在點擊功能中也包含e 。

Answer 2

請不要使用其他人建議的空href屬性，否則可能會破壞文檔的有效性。 來自RFC 2396，URI通用語法部分：

4.2。 同文檔參考

不包含URI的URI引用是對當前文檔的引用。 換句話說，文檔中的空URI引用被解釋為對該文檔開頭的引用，而僅包含片段標識符的引用是對該文檔的已識別片段的引用[...]

像這樣擴展你的JS：

$(document).ready(function(){
    $("#clickMe").click(function(evt){ //Add event object to the callback function
        evt.stopPropagation(); //Prevents event propagation/bubbling
        evt.preventDefault(); //Prevents browser's default behaviour when clicking
        $("img").fadeIn(1000);
        $("#picFrame").slideToggle();
        return false;
    });
});