1

我在布局中使用这样的东西

<nav id="main-nav">
   <a href="#link1">Link1</a>
   <a href="#link2">Link2</a>
   <a href="#link3">Link3</a>
</nav>
<div id="link1">
   some content goes here
</div>
<div id="link2">
   some content goes here
</div>
<div id="link3">
   some content goes here
</div>

所以当我点击一些导航链接时，它会向下滚动到正确的 div。问题是 NAV 是一个固定位置的菜单，它使用距离顶部 200px 的位置。我用来滚动的JS是这样的：

$('#main-nav a').click( function(event) {
    var nome = $(this).attr("href");
    $('html, body').animate({
         scrollTop: $(nome).offset().top-198
     }, 1600);
});

好的，所以有这个内部页面，导航链接变成：

<a href="http://www.mysite.com/#link1">Link1</a>

问题是它可以加载主页，但是 div 从顶部开始，在 NAV 下（因为offset().top-198它加载页面时没有。）我认为我需要找到一种方法#link从加载的 url 中获取做一个onLoad scrollTop，对吗？

请问有什么帮助吗？

4

2 回答 2

1

您可以使用类似于下面的内容，在 URL 中找到当前主题标签，然后将其与 divs ID 匹配，然后为该 ID 设置动画。

$(function(){
   currentPage = window.location.hash;
   moveLink =  $('div').find($(this).attr('id',currentPage));
   $('html, body').animate({
      scrollTop: $(moveLink).offset().top-198;
   });
});

编辑 - - - - - - - - - - - - - - - - - - - -

var aniFunc = function(a){
   $('html, body').animate({
       scrollTop: $(a).offset().top-198;
   });
};

$(document).ready(function(){
   currentPage = window.location.hash;
   moveLink =  $('div').find($(this).attr('id',currentPage));
   aniFunc(moveLink);
}

$('#main-nav a').click( function(event) {
    nome = $(this).attr("href");
    aniFunc(nome);
});
于 2013-02-23T23:54:01.870 回答
0

你最初可以做这样的事情：

window.location.href.match('(#.*$)')

并在页面加载时触发对该元素的点击。

于 2013-02-23T23:52:54.130 回答