有没有一种方法可以使用 CSS3 为滚动设置动画?
是这样的吗?
@-webkit-keyframes scrolltoview
{
0% { scrollTop: 0; }
100% { scrollTop: 30%; }
}
动画起点在哪里,css怎么写?
最佳答案
如解释here您可以使用 margin-top
技巧并动态更新滚动位置来做到这一点。您可以查看 demo .代码很简单:
// Define the variables
var easing, e, pos;
$(function(){
// Get the click event
$("#go-top").on("click", function(){
// Get the scroll pos
pos= $(window).scrollTop();
// Set the body top margin
$("body").css({
"margin-top": -pos+"px",
"overflow-y": "scroll", // This property is posed for fix the blink of the window width change
});
// Make the scroll handle on the position 0
$(window).scrollTop(0);
// Add the transition property to the body element
$("body").css("transition", "all 1s ease");
// Apply the scroll effects
$("body").css("margin-top", "0");
// Wait until the transition end
$("body").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd", function(){
// Remove the transition property
$("body").css("transition", "none");
});
});
});
@AndrewP 提供了一个很好的 working example基于这个想法
关于javascript - 使用 CSS3 动画滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10260666/