问题背景：
我有一个2页的网站。两个页面都使用具有导航栏的相同的masterlayout.cshtml页面。在Navbar中有一些链接，它们根据ID的ID向下滚动到第一页的相关div。
问题：
当我访问第二页时，我不能再从第一页上的Navbar链接重定向到指定的div。这是有道理的，因为重点不再在第一页，但是如何解决这个问题？
码：
以下是具有div id设置的Navbar代码，请注意data-id属性，指定要滚动到哪个div：
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#" class="scroll-link" data-id="Welcome">Welcome</a></li>
<li><a href="#" class="scroll-link" data-id="features">Club</a></li>
<li><a href="#" class="scroll-link" data-id="About">About Us</a></li>
<li><a href="#" class="scroll-link" data-id="Location">Location</a></li>
<li><a href='@Url.Action("FutureEvents","Events",new { pageNo = 1 })'>Events</a></li>
</ul>
</div>
滚动到的div的示例：
<div id="Welcome">
//HTML
</div>
JQuery用于滚动到相关的div：
function scrollToID(id,speed) {
var offSet = 70;
var obj = $(id).offset();
var targetOffset = $(id).offset().top - offSet;
$('html,body').animate({ scrollTop: targetOffset },speed);
}
解决方法
这可以通过cookie完成。设置要滚动的id的cookie，然后在加载新页面时，读取cookie并滚动到定义的id。我使用了非常受欢迎的插件
jquery-cookie。
以下是JavaScript代码：
$(document).ready(function () {
// Read the cookie and if it's defined scroll to id
var scroll = $.cookie('scroll');
if(scroll){
scrollToID(scroll,1000);
$.removeCookie('scroll');
}
// Handle event onclick,setting the cookie when the href != #
$('.nav a').click(function (e) {
e.preventDefault();
var id = $(this).data('id');
var href = $(this).attr('href');
if(href === '#'){
scrollToID(id,1000);
}else{
$.cookie('scroll',id);
window.location.href = href;
}
});
// scrollToID function
function scrollToID(id,speed) {
var offSet = 70;
var obj = $('#' + id);
if(obj.length){
var offs = obj.offset();
var targetOffset = offs.top - offSet;
$('html,speed);
}
}
});
这里我准备了一个最小的例子，这个工作：
http://plnkr.co/edit/l2aassM4biyNRWNCrvUz?p=preview
注意：单击事件导航到另一页。
