jQuery的scrollTo捕捉负载

之前，我有这个剧本，我的导航：jQuery的scrollTo捕捉负载

$(function() { 
    $("a").click(function (e) { 
     var target = $(this).attr("href"); 

     if (target.match("^#")) { // Check to see if we are an anchor link 
      e.preventDefault(); // Prevent default only if we are :) 

      navigate(target); 
     } 
    }); 
}); 

function navigate(target) { 
    var offset = $("header").outerHeight(true); 
    var $target = $(target); 

    if ($target.length > 0) { 
     var position = $target.offset().top - offset; 

     $("html, body").animate({ 
      scrollTop: position 
     }, 500); 
    } 
};

主要的事情要注意这个是偏移因为导航是固定。我对这个网站看起来是这样的：

<nav id="navigation" class="navbar navbar-main" role="navigation"> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav"> 
      <li class="active">@Html.ActionLink("Home", "Index", "Home")</li> 
      <li>@Html.ActionLink("Strategies", "Index", "Strategies")</li> 
      <li><a href="#services">Services</a></li> 
      <li><a href="#packages">Packages</a></li> 
      <li><a href="#work">How we work</a></li> 
      <li><a href="#portfolio">Portfolio</a></li> 
      <li><a href="#clients">Clients</a></li> 
      <li>@Html.ActionLink("Blog", "Index", "Blog")</li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div> 
</nav>

注意的HREFs这里。他们使用的散列正如你所期望的那样。但正如你所看到的，有2页将你带到另一个单独的页面（策略和博客）。这些页面上的菜单如下：

<nav id="navigation" class="navbar navbar-main" role="navigation"> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav"> 
      <li class="@Html.ActivePage("Home", "Index")">@Html.ActionLink("Home", "Index", "Home")</li> 
      <li class="@Html.ActivePage("Strategies", "Index")">@Html.ActionLink("Strategies", "Index", "Strategies")</li> 
      <li><a href="/#services">Services</a></li> 
      <li><a href="/#packages">Packages</a></li> 
      <li><a href="/#work">How we work</a></li> 
      <li><a href="/#portfolio">Portfolio</a></li> 
      <li><a href="/#clients">Clients</a></li> 
      <li class="@Html.ActivePage("Blog", "Index")">@Html.ActionLink("Blog", "Index", "Blog")</li> 
      <li><a href="/#contact">Contact</a></li> 
     </ul> 
    </div> 
</nav>

唯一不同的是，所有的环节现在有/＃，而不是仅仅＃将首先将其转到主页，然后它的动作它的位置。

因为这是一个正常的链接，它不是由我的导航字符串处理，所以我创造了这个功能：

function getHashtag() { 
    var href = location.href; // get the url 
    var split = href.split("#"); // split the string; usually there'll be only one # in an url so there'll be only two parts after the splitting 

    if (split[1] != null) { 
     navigate(split[1]); 
    } 
}

它得到的哈希，然后明确要求我导航功能。

我的整个脚本现在看起来是这样的：

$(function() { 
    getHashtag(); 

    $("a").click(function (e) { 
     var target = $(this).attr("href"); 

     if (target.match("^#")) { // Check to see if we are an anchor link 
      e.preventDefault(); // Prevent default only if we are :) 

      navigate(target); 
     } 
    }); 
}); 

function getHashtag() { 
    var href = location.href; // get the url 
    var split = href.split("#"); // split the string; usually there'll be only one # in an url so there'll be only two parts after the splitting 

    if (split[1] != null) { 
     navigate(split[1]); 
    } 
} 

function navigate(target) { 
    var offset = $("header").outerHeight(true); 
    var $target = $(target); 

    if ($target.length > 0) { 
     var position = $target.offset().top - offset; 

     $("html, body").animate({ 
      scrollTop: position 
     }, 500); 
    } 
};

正如你所看到的，我的页面加载后调用getHashtag，我需要做的就是把它叫做什么装载前和覆盖默认操作（可能是e.preventDefault）。有人知道我该怎么做？

干杯

来源

2014-01-30 r3plica

我不知道你在找什么难道要防止在哈希值的URL的情况下，默认的“jumpto”的行为？ –

您可以在您的页面的部分之前将您的“getHashtag”调用放入内联脚本中，以便在加载完整页面之前执行它。但是你的“导航”函数使用了一些jQuery方法，这些方法需要加载jQuery库。您可以尝试不使用jQuery，使用JavaScript的getElementById和其他函数。 –

你可能要对这个错误的方式...

你在谈论防止默认行为。所以你假设有一个事件要回应。有一个你可以听到的hashchange事件，但是我不知道在导航到不同的页面时它是否会触发。

关于在加载任何内容之前触发脚本：将脚本放入您的<head>-标记中，并在那里触发代码。但是，由于没有加载任何内容，因此您还无法跳到正确的位置，因为文档仍然是空的。

我建议你采取不同的方法：默认情况下，使用CSS来隐藏你的页面。如果在显示任何内容之前要运行的所有JavaScript都已完成，请更改css以显示该页面。这样你就可以完全控制何时显示任何东西。

来源

2014-01-30 11:17:47

好的欢呼声，我会发布基于此的答案 – r3plica

感谢@Hans我已经修改我的代码如下：

$(function() { 
    resetPosition(); 

    $("a").click(function (e) { 
     var target = $(this).attr("href"); 

     if (target.match("^#")) { // Check to see if we are an anchor link 
      e.preventDefault(); // Prevent default only if we are :) 

      navigate(target); 
     } 
    }); 
}); 

function resetPosition() { 
    $("html, body").animate({ 
     scrollTop: 0 
    }, 500, function() { 
     var href = location.href; // get the url 
     var split = href.split("#"); // split the string; usually there'll be only one # in an url so there'll be only two parts after the splitting 

     $(".body").removeClass("ajax"); 

     if (split[1] != null) { 
      navigate("#" + split[1]); 
     } 
    }); 
}; 

function navigate(target) { 
    var offset = $("header").outerHeight(true); 
    var $target = $(target); 

    if ($target.length > 0) { 
     var position = $target.offset().top - offset; 

     $("html, body").animate({ 
      scrollTop: position 
     }, 500); 
    } 
};

我身边有我的身体的包装带班。身体每一页开头的一段，所以我可以创建我的CSS是这样的：

.ajax { 
    background-image: url(Images/ajax-loader.gif); background-repeat: no-repeat; 
    background-position: center center; height: 500px; 
} 

.ajax section { 
    display: none; 
}

，我添加了阿贾克斯类我。体类，自动隐藏一切。页面加载时，它会移动到页面的顶部，然后当它已经到了那里，它将从。体删除阿贾克斯类揭示我们的内容，然后它会滚动到我们的哈希只有我们有一个。

完美:)

来源

2014-01-30 12:45:31 r3plica

jQuery的scrollTo捕捉负载

回答

相关问题