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

How to control the jump to a bookmark inside a page

本文关键字：书签 何控制 控制      更新时间：2023-09-26

我试图实现一个具有一定数量div的页面，每个div都有一个书签(一个名称)。问题是，当我跳转到其中一个书签时，由于设计的原因，部分文本已经消失了。我想知道是否有一种方法可以改变书签的行为，这样它就不会把它的开始设置在页面的顶部，而是设置在页面下方的像素数。

该页面可从这里进入:已不再在线，抱歉。

当你去到任何书签时(除了#6，因为文档在那里结束)都会出现这种行为，比如这里:Not longer online, sorry.

这可以通过css属性或任何其他方式解决吗?(更新)我更喜欢这个javascript解决方案，因为我计划使用javascript标签他们，并保持书签在禁用javascript

的情况下

您可以使用JavaScript使用scrollBy。将此置于load侦听器或onload处理程序中:

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

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

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

为了忽略由标题引起的100px偏移量，我为每个div元素添加了100px的padding-top，然后我将链接更改为指向div，而不是我添加的a元素。这个padding-top基本上使文本出现在它应该出现的地方，从而解决了我的问题。

相关文章：