使用Transition / CSS3滚动到锚点

一尘不染

使用Transition / CSS3滚动到锚点

css

我有一系列使用锚机制的链接：

<div class="header">
    <p class="menu"><a href="#S1">Section1</a></p>
    <p class="menu"><a href="#S2">Section2</a></p>
    ...
</div>
<div style="width: 100%;">
<a name="S1" class="test">&nbsp;</a>
<div class="curtain">
Lots of text
</div>

<a name="S2" class="test">&nbsp;</a>
<div class="curtain">
lots of text
</div>
...
</div>

我正在使用以下CSS：

.test
{
    position:relative; 
    margin: 0; 
    padding: 0; 
    float: left;
    display: inline-block;
    margin-top: -100px; /* whatever offset this needs to be */
}

一切正常。但是，当然，当我们单击链接时，它会从一个部分跳到下一个部分。因此，我想使用某种滚动到所选部分的开头进行平滑过渡。

我想我在Stackoverflow上读到，CSS3尚不可能（但现在），但是我想确认一下，并且我想知道什么是“可能的”解决方案。我很高兴使用JS，但不能使用jQuery。我试图在链接上使用on
click功能，检索需要显示的div的“垂直位置”，但未成功。我仍在学习JS，但对它的了解还不足以提出自己的解决方案。

任何帮助/想法将不胜感激。

阅读 867

2020-05-16

共1个答案

一尘不染

虽然某些答案非常有用且有用，但我想我会写下我想出的答案。Alex的回答非常好，但是在一定程度上限制了div的高度，需要在CSS中对其进行硬编码。

因此，我想出的解决方案使用JS（没有jQuery），实际上是简化解决方案的版本（几乎到最小），用于解决我在Statckoverflow上发现的类似问题：

的HTML

<div class="header">
    <p class="menu"><a href="#S1" onclick="test('S1'); return false;">S1</a></p>
    <p class="menu"><a href="#S2" onclick="test('S2'); return false;">S2</a></p>
    <p class="menu"><a href="#S3" onclick="test('S3'); return false;">S3</a></p>
    <p class="menu"><a href="#S4" onclick="test('S4'); return false;">S3</a></p>
</div>
<div style="width: 100%;">
    <div id="S1" class="curtain">
    blabla
    </div>
    <div id="S2" class="curtain">
    blabla
    </div>
    <div id="S3" class="curtain">
    blabla
    </div>
    <div id="S4" class="curtain">
    blabla
    </div>
 </div>

注意“返回错误；” 在点击通话中。如果您要避免浏览器跳到链接本身（并让效果由JS管理），则这一点很重要。

JS代码：

<script>
function scrollTo(to, duration) {
    if (document.body.scrollTop == to) return;
    var diff = to - document.body.scrollTop;
    var scrollStep = Math.PI / (duration / 10);
    var count = 0, currPos;
    start = element.scrollTop;
    scrollInterval = setInterval(function(){
        if (document.body.scrollTop != to) {
            count = count + 1;
            currPos = start + diff * (0.5 - 0.5 * Math.cos(count * scrollStep));
            document.body.scrollTop = currPos;
        }
        else { clearInterval(scrollInterval); }
    },10);
}

function test(elID)
{
    var dest = document.getElementById(elID);
    scrollTo(dest.offsetTop, 500);
}
</script>

非常简单。它使用其唯一ID（在功能测试中）找到div在文档中的垂直位置。然后，它调用scrollTo函数，以传递起始位置（document.body.scrollTop）和目标位置（dest.offsetTop）。它使用某种缓入曲线执行过渡。

感谢大家的帮助。

了解一些编码可以帮助您避免（有时很繁重）库，并为您（程序员）提供更多控制权。

2020-05-16