Question

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

<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>

问题是它加载了home，但div从顶部开始，在NAV下面（因为加载页面时没有offset().top-198。）我认为我需要的是找到一种从加载并生成#link onLoad的网址获取scrollTop的方法，是吗？

有什么帮助吗？

Answer 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); });

Answer 2

你可以做一些类似的事情：

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

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

检查活动div onload

2 个答案: