使用Transition / CSS3滚动到锚点 [英] Scrolling to an Anchor using Transition/CSS3

问题描述

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

I have a series of links which are using an anchor mechanism:

<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 */
}

但当然，当我们点击链接时，它从一个部分跳到下一个部分。所以我想有一个平滑的过渡，使用某种滚动到选定的
部分的开始。

It's working fine. But of course, it's jumping from one section to the next when we click on the link. So I'd like to have a smooth transition, using a scroll of some sort to the start of selected section.

我想我在Stackoverflow上读这是不可能的（但）与CSS3，但我想确认，我也想知道什么是可能的解决方案。我很高兴使用JS，但我不能使用jQuery。我试图使用链接上的点击功能，检索需要显示的div的垂直位置，但我不成功。我仍然在学习JS，并且不知道它足以提出我自己的解决方案。

I think I read on Stackoverflow that this is not possible (yet) with CSS3 but I'd like a confirmation and also I'd like to know what 'could' be the solution. I am happy to use JS but I can't use jQuery. I tried to use an on click function on the link, retrieve the "vertical position" of the div that needs to be displayed but I was unsuccessful. I am still learning JS and don't know it well enough to come up with a solution of my own.

任何帮助/想法将非常感激。 >

Any help/ideas would be greatly appreciated.

推荐答案

虽然一些答案非常有用和信息，我想我会写下我的答案。 Alex的答案是非常好的，但是在一定意义上，div的高度需要在CSS中硬编码。

While some of the answers were very useful and informative, I thought I would write down the answer I came up with. The answer from Alex was very good, it is however limited in the sense that the height of the div needs to be hard coded in the CSS.

所以我的解决方案使用JS（没有jQuery），实际上是一个剥离的版本（几乎到最低限度）过度的解决方案，以解决类似的问题，我发现在Statckoverflow：

So the solution I came up with uses JS (no jQuery) and is actually a stripped down version (almost to the minimum) of over solutions to solve similar problems I found on 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>

注意RETURN FALSE; 。如果您希望避免浏览器跳转到链接本身（并让效果由您的JS管理），这一点非常重要。

NOTE THE "RETURN FALSE;" in the on click call. This is important if you want to avoid having your browser jumping to the link itself (and let the effect being managed by your 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）。

It's incredibly simple. It finds the vertical position of the div in the document using its unique ID (in the function test). Then it calls the scrollTo function passing the starting position (document.body.scrollTop) and the destination position (dest.offsetTop). It performs the transition using some sort of ease-inout curve.

感谢大家的帮助。

知道一些编码可以帮助你避免（有时重的）库，并给你（程序员）更多的控制。

Knowing a bit of coding can help you avoiding (sometimes heavy) libraries, and giving you (the programmer) more control.

这篇关于使用Transition / CSS3滚动到锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！