使用Transition / CSS3滚动到锚点

用户名

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

<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,但对它的了解还不足以提出自己的解决方案。

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

用户名

虽然某些答案非常有用且有用,但我想我会写下我想出的答案。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)。它使用某种缓入曲线执行过渡。

感谢大家的帮助。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用js滚动到锚点

来自分类Dev

使用Vue Router滚动到锚点

来自分类Dev

使用ajax加载页面并滚动到加载的页面锚点

来自分类Dev

使用 jQuery 隐藏 Div 和滚动到锚点

来自分类Dev

除了使用“Minimal 3D Perspective Carousel with jQuery CSS3 3D Carousel”的默认行为外,还允许 href 锚点旋转轮播

来自分类Dev

使用锚点,类和jQuery滚动

来自分类Dev

滚动到锚点的开头

来自分类Dev

滚动到多个锚点

来自分类Dev

滚动到锚点的开头

来自分类Dev

使用CSS Transition在加载时滑动div

来自分类Dev

使用CSS:before分隔锚点

来自分类Dev

QTextedit设置锚点并滚动到它

来自分类Dev

平滑滚动到锚点的问题

来自分类Dev

提交后自动滚动到锚点

来自分类Dev

自动HTML页面刷新以保持滚动位置,并使用锚点

来自分类Dev

使用CSS3动画将div从屏幕顶部移动到屏幕底部吗?

来自分类Dev

CSS3 / Chrome:在CSS3 Cube中无法点击锚点

来自分类Dev

滚动到自定义CSS3过渡

来自分类Dev

仅使用css3的pinterest样式图像布局(包括无限滚动)

来自分类Dev

使用CSS在锚点内垂直对齐图像

来自分类Dev

使用 css 锚点时的角度路由器问题

来自分类Dev

d3:在transition.tween()中使用* name *参数

来自分类Dev

如何使用CSS3设计有点弯曲的重叠式翻盖形状

来自分类Dev

CSS3 Transition在Chrome中不再起作用

来自分类Dev

使用JavaScript而不是常规锚点移动到我网站中的其他页面

来自分类Dev

滚动到固定标题的锚点位置

来自分类Dev

更改“滚动到锚点”偏移量-jQuery

来自分类Dev

滚动到锚点时是否可以运行jQuery代码?

来自分类Dev

jQuery滚动到锚点页面上的位置

Related 相关文章

热门标签

归档