Question

我希望创建一个允许哈希标记跳转到页面某些内容的页面。

e.g。

http://example.com/page1#info会跳转到ID为#info

的标记

这是默认的浏览器行为，因此没有问题。

当我有一个固定的浏览器标题时问题就开始了，因为我需要一些额外的偏移，这样固定的标题就不会掩盖元素。

对于页面上的内部链接，这不是问题，因为我只使用以下代码：

var scrollOffset = 175;
$('a.tab-button[href^="#"]').on('click', function(event) {
    var $target = $(targetId);
    console.log($(this).attr('href'));

    if( $target.length ) {
        event.preventDefault();
        window.scrollTo(0, $target.offset().top - scrollOffset);
    }
})

其中scrollOffset是我希望将其偏移的像素数。

然而，问题在于在浏览器中输入url并单击enter（因为应该直接在页面上单击URL锚标记）。虽然它正确地滚动到元素;浏览器窗口和元素之间没有偏移，导致它隐藏在固定的导航栏下。

注意我已经知道以下技术：

h2:before { 
  display: block; 
  content: " "; 
  margin-top: -285px; 
  height: 285px; 
  visibility: hidden; 
}

以及http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/

中的其他CSS技巧

因此请只给JS回答!!!

Answer 1

以下似乎有效。 gotoHash()函数与现有代码基本相同，只是在超时范围内，这使得event.preventDefault()不必要。当函数在文档就绪之后但在浏览器滚动到哈希值之前运行时，这也解决了一个问题：

＆＃13;

location.hash = '#d3';  //used for demonstration purposes only

function gotoHash(id) {
  setTimeout(function() {
    var $target = $(id),
        scrollOffset = 100,
        y = $target.offset().top - scrollOffset;

    if ($target.length) {
      window.scrollTo(0, y);
    }
  });
}

$('a[href^="#"]').on('click', function() {
  gotoHash($(this).attr('href'));
});

$(document).ready(function() {
  gotoHash(location.hash);
});

＆＃13;

body {
  font: 12px verdana;
  margin: 100px 0px;
}
header {
  height: 100px;
  background: yellow;
  border: 1px solid gray;
  position: fixed;
  top: 0;
  width: 100%;
}
div {
  height: 1000px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <a href="#d1">div 1</a>
  <br>
  <a href="#d2">div 2</a>
  <br>
  <a href="#d3">div 3</a>
  <br>
  <a href="#d4">div 4</a>
  <br>
</header>
<div id="d1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="d2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="d3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<div id="d4">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

＆＃13;

在JS中的浏览器中键入url时，抵消散列标记链接以调整固定标题

1 个答案: