Question

美好的一天。我需要弄清楚如何在链接到页面上的特定部分后使用Ajax执行操作。我已经知道如何到达另一个页面上的指定DOM元素，但是我想进一步使用ajax执行一些操作，一旦访问者到达那一点。

例如

<nav>
 <ul><li><a href="about.php#team"></a></li></ul>
</nav>

请带我到这个about.php页面到＃34;团队＆＃34;格

<div>
 <div><a name="team"></a></div>
</div>

但是我想自动运行一些Ajax，当用户点击＆＃34; team＆＃34;中的某个对象时，通常会执行这些Ajax。 DIV。因此，如果用户通过上面的链接进入此部分，它将直接转到内容。这有意义吗？

Answer 1

我想出去玩，并假设您正在使用jQuery的animate()进行滚动：

$('html, body').animate(
    { scrollTop: $("#something").offset().top },
    1000,
    function() {
        someAjaxFunction();
    }
);

var someAjaxFunction = function() {
    $.ajax({
        url: '/something/'
    }).done(function(data) {
        // Done!
    });
};

我们正在使用给予animate()的回调函数参数来触发我们的ajax请求。

Answer 2

您可以使用jQuery的scrollTo()滚动到页面上的区域，然后使用complete函数在滚动完成后调用ajax。详细说明here

$('body').scrollTo('#target', function()
{
    // Do your AJAX Thaaang
});

Answer 3

可以运行此检查以确定用户是否已直接导航到teamDiv。在页面加载时运行它将允许您在用户与另一页面的teamDiv深度链接的情况下捕获它：

if (/#team/.test(window.location.href)) { // perform Ajax query here... }

注意：在示例链接中，您使用标识team，而div的ID属性设置为teamDiv。它们需要相同才能发挥作用。

Answer 4

因此，如果用户点击＆＃34;团队中的某个对象，代码就会运行。 DIV？

在这种情况下，这是一个选项吗？

<div>
  <div id="teamDiv"><a name="team"></a>some element</div>
</div>

<script type="text/javascript">
 $(function() {
       $("#teamDiv").click(function() {
            //put what you want to happen when the user clicks something in
            //teamDiv here
        });
 })
 </script>

Answer 5

我的建议是阅读当前加载的网址：

$(document).ready(function () {
  var location = window.location.href;
  if(location.indexOf('#team' > -1) {
    // do something
  }
}

Answer 6

您可以检查location.hash（http://www.w3schools.com/jsref/prop_loc_hash.asp）以确定是否存在哈希值。
如果您想在此div的每个导航变体中执行某些操作：单击并滚动您可以使用以下内容：

$(document).bind('scroll', function() { if($(this).scrollTop() > $('.your-div').top()) { alert('do something'); } })

在页面加载时滚动到特定区域并执行Ajax查询

6 个答案: