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伪造的链接是一个很好的做法（并且更具系统性，更正确）。

Answer 2

一年后和未来的问题，最好的解决方案是使用fadeTo()代替fadeIn()

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

2 个答案:

您的问题

解决方案

附录