Question

我有一个带有固定标题的页面，我希望像http://example.com#foo这样的网址滚动到带有id=foo的元素，并减去标题的高度，以便元素可见。

我已尝试过以下操作，但至少在Chrome中，此代码在默认文档片段滚动发生之前运行，因此滚动位置会被覆盖：

$(function() {
  var offset;
  if (window.location.hash !== "") {
     offset = $(window.location.hash).offset().top;
     return $("body").scrollTop(offset - headerHeight);
  }
});

这是问题http://jsfiddle.net/rk8y7/1/

的问题

Answer 1

我能够通过将DOM元素的id更改为当前id + _section然后侦听hashchange事件来设置滚动位置来实现此功能的页面。我还必须在页面加载时触发hashchange以使其在第一页加载时工作。

$(function() {
  $(window).on('hashchange', function() {
    var elemId, headerHeight, offset;
    elemId = window.location.hash + "_section";
    if (window.location.hash !== "" && $(elemId).length) {
      headerHeight = $('header').height();
      offset = $(elemId).offset().top;
      return $("html, body").scrollTop(offset - headerHeight);
    }
  });
  $(window).trigger('hashchange');
});

这是我的小提琴http://jsfiddle.net/sguha095/rk8y7/4/

将“垂直偏移”减去“文档碎片”滚动

1 个答案: