Question

我正在尝试创建一个包含一定数量div的页面，每个div都有一个书签（名称）。问题是，当我跳转到其中一个书签时，部分文本消失了，这是由设计引起的。我想知道是否有办法改变书签的行为，所以它不会在页面顶部设置它的开头，而是在下面设置一定数量的像素。

可以在此处访问该页面：不再在线，抱歉。

当您转到任何书签时会出现这种情况（＃6除外，因为文档在那里结束），就像在这里：不再在线，抱歉。

这可以通过css属性或任何其他方式解决吗？（更新）我更喜欢这个通过javascript解决方案，因为我打算使用javascript来标记它们，并在禁用javascript的情况下保留书签

Answer 1

您可以使用scrollBy使用JavaScript执行此操作。把它放在load监听器或onload处理程序中：

if(window.location.hash.length > 1) {
    window.scrollBy(0, -60); // Adjust to suit your needs.
}

Answer 2

window.onhashchange = window.onload = function () {
     if( window.location.hash.length && window.scrollY > window.pageYOffset ) {
          window.scrollBy( 0, -100 ); // Scroll up 100 pixels on hash change
     };
};

Answer 3

我自己得到了答案，所以这基本上是为了参考。

为了忽略由标题引起的100px偏移，我在每个div元素中添加了一个100 {1}的padding-top，然后我更改了链接以转到div而不是我添加的元素。这个填充顶部基本上使文本出现在它应该的位置，从而解决了我的问题。

如何控制跳转到页面内的书签

3 个答案: