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;
    });
});

如何在执行我的jquery代码时修复浏览器

2 个答案: