頁面滾動到不同的頁面

也許這是不可能的ASP.NET MVC，因爲我無法找到答案。我想要做的是點擊一個鏈接，它將加載目標頁面，然後滾動到該頁面上的錨點。一個完美的例子在this question回答。頁面滾動到不同的頁面

但是，我如何獲得這與JavaScript/jQuery的工作？

更新：有了這段代碼，除了setTimeOut定義之外，一切正常。它只是繼續運行腳本，直到我點擊停止，然後滾動到錨點。這是爲什麼？

var jump = function (e) { 
    if (e) { 
     e.preventDefault(); 
     var target = $(this).attr("href"); 
    } else { 
     var target = location.hash; 
    } 

    $('html,body').animate(
{ 
    scrollTop: $(target).offset().top 
}, 2000, function() { 
    location.hash = target; 
}); 

} 

$('html, body').hide(); 
$(document).ready(function() { 
    $('a[href^=#]').bind("click", jump); 

    if (location.hash) { 
     setTimeout(function() { 
      $('html, body').scrollTop(0).show(); 
      jump(); 
     }, 0); 
    } else { 
     $('html, body').show(); 
    }   

});

來源

2012-04-10 Lars Hovden

我知道有一個Jquery滾動插件在同一頁上的錨點。但是，我如何才能在另一頁上找到錨點。 – 2012-04-10 16:31:22

這是可能的通過使用ActionLink。順便說一句我正在使用ASPX頁面， – 2012-04-10 18:41:57

沒有其他想法？ – 2012-04-11 15:10:42

我什麼都不知道asp.net，但這是什麼，我認爲正在發生的事情：如果散在的位置提供

ASP.NET MVC的MicrosoftAjax模塊重新加載在初始化頁面。

的MVC框架，即其MicrosoftAjax成分，嘗試一些瀏覽器的歷史記錄管理，它使用URL的哈希部分對於這個問題，這是一個有效的標準程序，直到這一點。在初始化時，通過Sys$_Application$initialize()從事_navigate()的_raiseNavigate()應用方法。而這一次做一些舞蹈專門用於Firefox：

// Name:  MicrosoftAjax.debug.js 
// Assembly: System.Web.Extensions 
// Version:  4.0.0.0 
// FileVersion: 4.0.20526.0 

if ((Sys.Browser.agent === Sys.Browser.Firefox) && window.location.hash && 
    (!window.frameElement || window.top.location.hash)) { 
    window.history.go(0); 
}

三個條件：

瀏覽器是火狐
地址攜帶URL
它不是一個幀

他們都通過你的情況和野獸釋放：

window.history.go(0);

指示瀏覽器的歷史記錄管理器按照作爲參數給定的距離後退或前進。 -2回退一步，1前進一步。因此0有效地重新加載頁面。並且在頁面加載時爲每個散列賦予頁面。無論如何，想不到這條線的任何有效用途......

果然，如果我將那些相當毛茸茸的無意義線條評論出來，它就會有效！它似乎是對Firefox 3.5或更低版本的向後兼容性嘗試，所以我會說刪除它或更好地更新您的MVC。

來源

2012-04-12 15:02:14

非常感謝！有效！！！ – 2012-04-12 18:18:56

不客氣:)對於完整版：您是否更新過或是否修補過當前版本？ – 2012-04-12 19:07:41

這實際上不是關於ASP.NET MVC，更多關於客戶端腳本（Javascript）的。看到這個關於散列（＃）的SO thread，因爲它涉及到路由...我認爲這是唯一與ASP.Net MVC相關的項目...

來源

2012-04-10 14:38:22 EdSF

確實。我編輯了標題和標籤。 – abatishchev 2012-04-10 18:50:58

恰恰相反。我有機會玩Lars的代碼，並且在拿出每個只留下MicrosoftAjax.js的腳本作爲唯一的腳本之後，仍然會出現問題。看起來像MicrosoftAjax.js嘗試處理URL本身的散列部分本身以某種方式.. – 2012-04-12 11:00:59

這不是jQuery的問題。在你看來，你應該把一些代碼，

<script> 
    $(function() } 

    var hash = window.location.hash; 
    var achor = hash.substring(hash.indexOf('#')); 

    $('html,body').animate({scrollTop: $("#"+achor).offset().top} 

    }); 
</script>

來源

2012-04-10 18:54:56

然後，我的鏈接代碼是什麼？ – 2012-04-10 18:57:49

Link – 2012-04-10 19:02:11

好吧，所以它的工作。然而，它沒有做滾動動畫和頁面一直刷新 – 2012-04-10 19:14:21

我回答了我自己的部分問題。我總是使用Firefox，所以我的測試是在Firefox 11.0中。我快速檢查它在IE瀏覽器，它的工作。在以前的Firefox版本中進行了測試，並且工作正常。它只是不適用於Firefox 11.0。我將結束這個問題並開闢一個解決適當問題的新問題。

來源

2012-04-11 18:20:37

我已經可以使用Firefox 10.1複製 – 2012-04-12 11:02:05

頁面滾動到不同的頁面

回答

相關問題