【问题标题】：Smooth scrolling with just pure css [duplicate]仅使用纯 css 平滑滚动 [重复]
【发布时间】：2014-04-10 09:44:27
【问题描述】：

如何仅使用纯 css 进行平滑滚动。

我有这个代码Fiddle

HTML

<a id="up" href="#down">down</a>
<div class="up"></div>

<a id="down" href="#up">up</a>
<div class="down"></div>

CSS

.up {
    width:100px;
    height: 600px;
    background-color: red;
}

.down {
    width:100px;
    height: 400px;
    background-color: yellow;
}

我知道:target 可以提供帮助，但我不知道如何将它与transition 一起使用。

【问题讨论】：

我认为这个问题的答案和@sidney 标记的可能重复的答案对于“滚动”是什么含糊不清。 transition 效果仅适用于更改定位（注意：不是滚动位置），因此并不像使用 Skrollr 或 Jquery 实现的那样真正“滚动”

标签： css

【解决方案1】：

您可以使用纯 CSS 执行此操作，但您需要对偏移滚动量进行硬编码，如果您要更改页面内容，或者内容的尺寸发生变化，这可能并不理想窗口调整大小。

您可能最适合使用例如jQuery，具体来说：

$('html, body').stop().animate({
   scrollTop: element.offset().top
}, 1000);

一个完整的实现可能是：

$('#up, #down').on('click', function(e){
    e.preventDefault();
    var target= $(this).get(0).id == 'up' ? $('#down') : $('#up');
    $('html, body').stop().animate({
       scrollTop: target.offset().top
    }, 1000);
});

其中element 是要滚动到的目标元素，1000 是完成前的延迟（毫秒）。

Demo Fiddle

好处是，无论您的内容尺寸发生什么变化，都不需要更改功能。

【讨论】：

感谢它在 Fiddle 上运行良好，但你能解释一下这个 scrollTop: element.offset().top，为什么它是 hust top 或 scrollTop 吗？我没有看到down。
在小提琴中，该函数计算出两个链接元素中的哪一个被点击，然后将target元素设置为相反的元素，页面滚动到这个@987654331的顶部@
问题是语义上的-它意味着滚动到传递元素的顶部，而不是滚动的方向
你需要做 event.preventDefault() 否则浏览器正在执行与默认锚标记位置更改的冲突行为 - 复制答案中的代码
问题要求“只是纯 CSS”而不是 JQuery...

【解决方案2】：

您需要使用target 选择器。

这里是另一个例子：http://jsfiddle.net/YYPKM/3/

【讨论】：

但是如果我改变我的 DIV 的高度会更难。
如果你只想要纯 CSS，你应该这样做。
是的，这就是价格
这是一个很酷的技巧。我以前从未见过:target 伪类。