Javascript 使用CSS3设置滚动动画

有没有办法用CSS3制作滚动动画

像这样的

@-webkit-keyframes scrolltoview
{
    0%   { scrollTop: 0; }
    100% { scrollTop: 30%; }
}

---

如何将css放入动画的起始点在哪里？

我认为css3不可能做到这一点，但如果我正确理解您的问题，使用jquery就很容易了

退房：

---

css3动画仅适用于css属性。这在css的范围内是不可能的。

如前所述，您可以使用

边距顶部

技巧和动态更新滚动位置来实现。你可以查一下电话号码。代码是直截了当的：

// 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提供了一个基于这个想法的好方法

我发现了一种更好的动画滚动方式，即使用JavaScript翻译文档正文。使用“平移”（translate）设置动画的优势非常明显。底线是，当设置元素动画时，GPU总是做得更好

下面是一个示例，它从窗口顶部计算用户的当前位置，然后平滑地转换回窗口顶部。假设用户点击或触摸事件触发了backToTop功能

在行动中看到它：

---

这是一个非常简单的.js函数，我用来制作网页的动画和滚动

var Current_scroll_Y=0;
var Target_scroll_Y=0;
var scroll_Speed = 15;

function animate_Scroll(Y)
{
  Target_scroll_Y = Y;
  screen_Y = Math.floor(window.scrollY);

  //Scroll Down
  if(screen_Y<Y)
  {
    var myWindowScroll = setInterval(function(){ screen_Y = screen_Y+scroll_Speed;  if(screen_Y>=Target_scroll_Y){ clearInterval(myWindowScroll); return;}    window.scrollTo(0, screen_Y); }, 3);   
  }
  //Scroll Up
  if(screen_Y>Y)
  {
    var myWindowScroll = setInterval(function(){ screen_Y = screen_Y-scroll_Speed;  if(screen_Y<=Target_scroll_Y){ clearInterval(myWindowScroll); return;}    window.scrollTo(0, screen_Y); }, 3);  
  } 


}//End animate_Scroll  

var Current\u scroll\u Y=0；
var Target_scroll_Y=0；
var scroll_速度=15；
函数设置滚动动画（Y）
{
目标_滚动_Y=Y；
screen_Y=数学地板（window.scrollY）；
//向下滚动
如果（screen_Y=Target_scroll_Y）{clearInterval（myWindowScroll）；return；}window.scrollTo（0，screen_Y）；}，3）；
}
//向上滚动
如果（屏幕Y>Y）
{
var myWindowScroll=setInterval（function（）{screen\u Y=screen\u Y-scroll\u Speed；if（screen\u YNo），因为在css中没有动画就无法滚动。你能澄清一下“动画滚动”是什么意思吗？滚动虽然平凡，但却是一种动画形式。你会如何进一步设置它的动画？@Micha你是对的，没有动画我也做不到。@Anthony假设你在文本区域的顶部，你想滚动它（在代码中）到底部，没有动画，它只会跳到底部。有动画，它会顺利完成。比如说iPhone。谢谢你的回答。我知道用JQuery可以完成。有没有一个好方法可以应用相同的效果，但通过使用类似“home”或“services”这样的锚散列来完成此代码？@GerbenVanDijk我已经晚了这一个，但我建立了我认为你要求的（一个功能，找到页面上锚的每个链接，并通过CSS3+边距顶部修改其点击滚动，测试到IE 8）：@AndrewP不幸的是，它在Safari 7.0中不起作用。它可以滚动，但没有animation@mente当我修改或调整它时，你可能发现它处于一种尴尬的损坏状态。我刚刚在Safari 7.0（9537.71）中再次检查了它“为了验证，它很顺利地为卷轴设置了动画。@mente敏锐地观察到！奇怪的是，它在“编辑代码笔”视图中对我起作用，但它本身就坏了。我已经调试并修复了（我希望如此）问题一劳永逸。我试图在
documentElement
上使用
scrollTop
，但在Safari中失败了，尽管这应该是标准方法。最终通过找到了一个在Safari、Chrome、Firefox甚至IE 8中都能工作的解决方案（）不要被上升的票数搞糊涂了，使用“转换超过利润上限”可以显著提高性能！
var Current_scroll_Y=0;
var Target_scroll_Y=0;
var scroll_Speed = 15;

function animate_Scroll(Y)
{
  Target_scroll_Y = Y;
  screen_Y = Math.floor(window.scrollY);

  //Scroll Down
  if(screen_Y<Y)
  {
    var myWindowScroll = setInterval(function(){ screen_Y = screen_Y+scroll_Speed;  if(screen_Y>=Target_scroll_Y){ clearInterval(myWindowScroll); return;}    window.scrollTo(0, screen_Y); }, 3);   
  }
  //Scroll Up
  if(screen_Y>Y)
  {
    var myWindowScroll = setInterval(function(){ screen_Y = screen_Y-scroll_Speed;  if(screen_Y<=Target_scroll_Y){ clearInterval(myWindowScroll); return;}    window.scrollTo(0, screen_Y); }, 3);  
  } 


}//End animate_Scroll