Question

我在页面顶部有一个绝对定位的菜单，比方说高50px。因此，当有人访问我网站上的网址时，例如：

http://www.example.com/page.html#anchor

页面滚动50px太高（菜单覆盖）。

我正在尝试这样做，以便每次使用内部锚点访问链接时，页面将偏移50px，但这不起作用：

if (document.location.href.indexOf('#') > -1) {

  var leavespace = 50;
  $('html,body').animate({scrollTop:leavespace}, 'slow');

}

我得到了慢速动画滚动，但它仍然是50px太高。

Answer 1

您的代码有效，请确保您已准备就绪

$( document ).ready(function() {

  if (document.location.href.indexOf('#') > -1) {

  var leavespace = 50;
  $('html,body').animate({scrollTop:leavespace}, 'slow');
  }

});

Answer 2

您可以将hashchange事件用于此目的：

$(window).on("hashchange", function () {
    var leavespace = 50
    window.scrollTo(window.scrollX, window.scrollY + leavespace);
});

Working example

Answer 3

要使其不使用jquery，我实现了它（基于Elena的响应）：

window.onhashchange = function (){
        var leavespace = 50
        window.scrollTo(window.scrollX, window.scrollY - leavespace);
    };

jQuery-从内部锚标记的页面顶部创建偏移量

3 个答案: