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捕捉負載

回答

相關問題