Question

我正在设计一个只有一个按钮的HTML页面。用户单击该按钮，一个简单的jQuery脚本会激活该div，从而显示较低的页面内容。你可以看到它here。

我注意到它第一次看起来/工作正常，但如果我用浏览器按钮刷新页面，它就不能完全重置。初始容器只占页面的一半。如果我再次输入URL并加载页面，它将按预期重置。 注意：只有在单击初始按钮后向下滚动一下才会发生这种情况......这看起来很奇怪。

我不知道这两个操作之间有什么区别，但显然有。有什么区别，如何解决这个问题呢？

这是我的jQuery代码，如果相关的话：

    $(document).ready(function(){

    var faqs = $("#FAQ");
    $("#learnmore").click(
        function(){
            $("#home").animate({top:'-=1066px'},600);
            $("#more").animate({top:'-=1066px'}, 600, function() {$("#background").hide();} );
            $("body").css('overflow-y', 'scroll');

            //$("#home").slideUp();
            console.log("jquery loaded");
            }
        );

});

Answer 1

这是因为浏览器缓存了它。

如果您的样式经常被修改，那么最简单的方法就是在引用的末尾附加一个唯一的id，例如

<link href="style.css?time=168768234928" ..../>

它做了什么，它使浏览器认为每次加载都是一个新的请求。

Answer 2

这是因为浏览器试图滚动到相同的位置，在页面重新加载之前是什么。要检查它，请尝试按下按钮，不要滚动到页面底部，然后重新加载页面。哦，原因很清楚。

现在我们需要解决方案。试试这个：

#more {display:none}

在你的CSS中。然后使用

$("#more").show().animate(...

在$("#learnmore").click()函数中。我希望这能解决问题。

页面重新加载不会重置jQuery / CSS样式

2 个答案:

这是因为浏览器缓存了它。