jquery - 使用 jQuery .load 时防止滚动到顶部

Question

我的网站上有三个按钮，当您单击每个按钮时，它们会使用 .load 将不同的内容添加到 DIV 中。我遇到的问题是，每当您单击按钮时，它都会将您带回页面顶部。我尝试过使用 PreventDefault() 并返回 false，但它对我不起作用，我可能只是将其放置在错误的位置。

您可以在http://coralspringshigh.org/cshs/查看问题，这是我现在拥有的 jQuery:

    if($(tabsId).length > 0){
            loadTab($(tabsId));
        }
        $(tabsId).click(function(){
            if($(this).hasClass(selected)){ return false; }
            $(tabsId).removeClass(selected);
            $(this).addClass(selected);
            $(containerId).hide();
                loadTab($(this));
            $(containerId).fadeIn();
            return false;
        });

    function loadTab(tabObj){
     if(!tabObj || !tabObj.length){ return; }
     $(containerId).addClass('loading');
     $(containerId).load(tabObj.attr('href'), function(){
          $(containerId).removeClass('loading');
          $(containerId).fadeIn('fast');
     });
    }

提前谢谢您。

Answer 1

您的问题

当您加载内容时，您会隐藏之前的内容，这会缩短您的页面。因此，您的页面没有向上滚动，但页面变得越来越短，并且您的浏览器正在重新对齐到页面的新底部。这就是导致您所看到的行为的原因。

解决方案

要解决此问题，您可以执行以下操作。我的建议是在后台加载内容，并显示覆盖旧内容的加载覆盖层。然后，当加载新内容时，在显示新内容后，通过隐藏旧内容来交换它。用户不会看到差异，因为它会很快发生，但您不会获得“滚动”效果。

解决这个问题的另一种方法是使用 jQuery .scrollTo()函数在加载后滚动到新内容，以便内容到达页面顶部(或页面最高位置)。

附录

您的 HTML 不完全有效。 <div>元素不能有 href属性。相反，请将文本包装在 <a> 中标记使其有效。

<div class="classname"><a href="page.html" class="ajaxclicklink">Students</a></div>

然后，您的代码应该执行以下操作

event.preventDefault();
event.stopPropagation();

这将停止默认链接，并且还允许使用不支持 JavaScript 的浏览器。拥有完整的工作链接而不是仅仅使用 javascript 伪造的链接是一个很好的做法(并且在符号上更正确，我认为)。