锚点过渡css,使用Transition / CSS3滚动到锚点

小编典典

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

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

的HTML

S1

S2

S3

S3

blabla

blabla

blabla

blabla

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

JS代码：

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);

}

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

感谢大家的帮助。

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

2020-05-16