防止在使用jQuery .load时滚动到顶部 [英] Prevent scrolling to top when using jQuery .load

问题描述

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

I have three buttons on the site and when you click each one, they use .load to add different things to a DIV. The problem I'm having is whenever you click a button, it sends you back to the top of the page. I've tried using preventDefault() and return false but it didn't work for me, I might have just placed it in the wrong spot.

您可以在 http://coralspringshigh.org/cshs/上看到问题，这是我现在使用的jQuery:

You can see the problem at http://coralspringshigh.org/cshs/ , here's the jQuery that I have now:

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

谢谢.

推荐答案

您的问题

在加载内容时，您将隐藏先前的内容，这缩短了您的页面.因此，您的页面没有向上滚动，但是页面越来越短，浏览器正在重新调整到页面的新底部.这就是导致您看到的行为的原因.

Your Issue

When you are loading the content, you are hiding the previous content, which is shortening your page. So, your page is not scrolling up, but your page is becoming shorter, and your browser is re-aligning to the new bottom of the page. This is what is causing the behavior you are seeing.

要解决此问题，您可以做一些事情.我的建议是在后台加载内容，并显示覆盖旧内容的加载叠加层.然后，在加载新内容后，在显示新内容后 隐藏旧内容以将其换出.用户不会看到差异，因为差异会很快发生，但您不会获得那种滚动"效果.

To solve this problem, there are a few things you can do. My recommendation is to load the content in the background, and display a loading overlay that goes over the old content. Then, when the new content is loaded, swap it out by hiding the old content after you show the new content. The user won't see a difference since it will happen quickly, but you not get that 'scroll' effect.

另一种解决方法是使用jQuery .scrollTo()函数在加载新内容后滚动到新内容，以使内容到达页面顶部(或尽可能高的页面).

Another way to solve it is to use the jQuery .scrollTo() function to scroll to the new content after it is loaded, so that the content goes to the top of the page (or as high as the page can be).

您的HTML并不完全有效. <div>元素不能具有href属性.而是将您的文本包装在<a>标记中以使其有效.

Your HTML is not completely valid. The <div> element cannot have an href attribute. Instead, wrap your text in an <a> tag to make it valid.

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

然后，您的代码应该执行一次

and from there, your code should do a

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

这将停止默认链接，并且还允许使用不支持javascript的浏览器.拥有完整的有效链接，而不是仅使用JavaScript伪造的链接，这是一个好习惯(而且更正确地说，是imo).

This will stop the default linking, and also allow the use of a browser that does not support javascript. It is a good practice (and more symatically correct, imo) to have full working links instead of just javascript faked links.

这篇关于防止在使用jQuery .load时滚动到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！