Question

我在我的项目中使用bootstrap scrollspy，基本上我点击这里有一个链接，其中包含以下网址格式http://example.com/#positionA，并且在它加载的页面上我有以下HTML代码

<p></p>
<h3 id="positionA">Position A</h3>
<p>This is a test code</p>

我遇到的问题是页面加载到我想要的位置但滚动停在

这是一个测试代码

位置而不是位置A.

如何修复scrollspy停止的位置，以便在段落标题之前停止并显示标题？谢谢

[UPDATE] 该项目是一个prestashop网站，我正在研究该网站的条款和条件。因此，在交付页面上，我点击此处，如果客户点击它，它将带他到特定部分的条款和条件页面。身体上我有这个

<body id="cms" class="cms cms-3 cms-terms-and-conditions-of-use hide-right-column lang_en  two-columns" data-spy="scroll" data-offset="50">

所有文字都与这个div相吻合

<div id="center_column" class="center_column col-xs-12 col-sm-9">
<div class="rte">
</div>
</div>

所以在发送页面上我有以下代码

<li>Terms and conditions for delivery, refund and returns please <a href="http://examople.com/content/3-terms-and-conditions-of-use#refunds_returns">click here</a></li>

Answer 1

使用Scrollspy偏移量

添加

 data-offset="10"

到

<a data-spy="scroll" data-target="#positionA" data-offset="20" href="#positionA" >

在计算滚动位置时，它将“从顶部偏移”，以像素为单位

Answer 2

我找到了解决方案，这是我的代码如何修复它

var hash = false;
if(window.location.hash) {
    hash = true;
}

if (hash)
{
    hash = document.URL.substr(document.URL.indexOf('#')+1);
    var anchor = $('#'+hash).offset();
    console.log("left" + anchor.top);
    anchor.top = anchor.top - 100;
    console.log("top" + anchor.top);
    $('html, body').animate({
            scrollTop: anchor.top
        }, 500);
}

如何在scrollspy上设置停止位置

2 个答案: