Question

我开始使用一些bootstrap 4演示主题。

当我创建链接去同一页面的部分时 - 它们走得太远而且我松开了那个div的前几行，所以我必须向后滚动一点才能看到开始。在这个例子中 - 它可能以“content3”左右开始。

似乎有某种偏移可能会这样做？我不知道在哪里找到它。

有任何想法如何调整以不超过div的开头？

<a href="#here1" >MY INFO goooo</a>

<div id="here1" class="container text-center">
content1<br>
content2<br>
content3<br>
content4 etc....<br>
</div>

谢谢 - 戴夫

Answer 1

function scrollToDiv(divID){
    $('html, body').animate({
        scrollTop: $('#' + divID).offset().top - 50
    }, 1000);
}

Answer 2

如果您的网站有固定的标题，您可能已经注意到锚标记链接无法正常工作 - 当用户使用锚链接时，锚的位置会隐藏在固定标题后面，隐藏内容的第一部分。

此方法不涉及任何JavaScript或需要更改主题或内容。

HTML中的

：

<a class="anchor" id="top"></a>

要解决此问题，您可以将以下内容添加到CSS样式表中。

以下是我申请的一项修正：

为你的CSS：

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

这是另一种方法：

:target:before {
    content:"";
    display:block;
    height:90px; /* fixed header height*/
    margin:-90px 0 0; /* negative fixed header height */
}

注意：90px是固定标头加上边距和填充的高度。您需要将其调整为固定标题的大小。

缺点是它需要浏览器支持伪元素，如果目标元素具有背景颜色，重复背景图像，填充顶部或边框顶部作为一部分，它将失败它的规则集。

了解更多方法及其优缺点：Jump links and viewport positioning

此解决方案使用JS：

var shiftWindow = function() { scrollBy(0, -50) };
if (location.hash) shiftWindow();
window.addEventListener("hashchange", shiftWindow);

您可以阅读有关其他用户解决方案的更多信息here。

链接不是从Div的顶部开始

2 个答案: