使用jQuery的.load时如何防止页面滚动到顶部

Question

我网站上有三个按钮，当你点击每个按钮时，它们使用.load将不同的内容添加到一个DIV中。问题是，每当你点击一个按钮时，它会把你送回页面顶部。我尝试使用preventDefault()和return 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');
     });
    }

谢谢您提前的支持。

- Koalatea

---

href 不是 div 上的有效属性。可能发生的情况是它将其视为链接，并执行默认操作，但它不知道如何执行。尝试停止事件，但我建议使用有效的 HTML 代码。将内容包装在 <a> 标签中，并在单击时阻止默认事件。这是更好的处理方式。 - LoveAndCoding

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伪造链接是一个好习惯（在我看来也更符合语义）。

- LoveAndCoding

---

那不是问题，我只是尝试将div包装在'a'标签周围，但没有任何变化。很奇怪，因为我在主页上有完全相同的代码，可以正常工作。 - Koalatea

好的，你说得对，我看到了实际问题并会进行更新，但你仍然应该尽量在代码中使用有效的属性和HTML，所以我会将这个答案作为补充留下。 - LoveAndCoding

Answer 2

在一年之后以及未来的问题中，最好的解决方案是使用 fadeTo() 而不是 fadeIn()

- Kraven

---

你能再解释一下吗？ - joergl