问题背景:
我有一个 2 页的网站。这两个页面都使用具有导航栏的相同 masterlayout.cshtml 页面。导航栏中有许多链接,可根据其 ID 向下滚动到第一页上的相关 div。
问题:
当我访问第二页时,我无法再从第一页的导航栏链接重定向到指定的 div。这是有道理的,因为焦点不再在第一页上,但我该如何解决这个问题?
代码:
这是设置了 div id 的 Navbar 代码,请注意指定要滚动到哪个 div 的 data-id
属性:
<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>
用于滚动到相关 div 的 JQuery:
function scrollToID(id, speed) {
var offSet = 70;
var obj = $(id).offset();
var targetOffset = $(id).offset().top - offSet;
$('html,body').animate({ scrollTop: targetOffset }, speed);
}
如果有人可以帮助提出一个可行的解决方案,以便能够从不同的页面调用这些 ID,那就太好了。
最佳答案
这可以通过 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,body').animate({ scrollTop: targetOffset }, speed);
}
}
});
我在这里准备了一个最小的例子:
http://plnkr.co/edit/l2aassM4biyNRWNCrvUz?p=preview
注意:单击Events
导航到其他页面。
关于jquery - 通过平滑滚动重定向到不同页面上的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30518747/