使用CSS3動畫滾動

Question

有沒有使用CSS3動畫滾動的方法？

這樣的事情？

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

如何在css中放置動畫的起始點？

Answer 1

CSS3動畫只用CSS屬性的作用。這在css的範圍內是不可能的。

Answer 2

我不認爲這是可能的與CSS3，但如果我正確理解你的問題，這是非常容易與jQuery。

退房：

http://demos.flesler.com/jquery/scrollTo/

http://api.jquery.com/scroll/

Answer 3

如解釋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基於這一理念

Answer 4

我發現了一個更好的方式來製作動畫滾動，這是使用JavaScript文檔正文翻譯提供一個很好的working example。通過翻譯保證金或位置進行動畫製作的優勢很好記錄（http://goo.gl/nA4ccd）。底線是，當動畫元素時，GPU總是會做得更好。

下面是一個例子，它從窗口頂部計算用戶的當前位置，然後平滑地回到窗口頂部。假設用戶點擊或觸摸事件觸發了backToTop功能。

看到它在行動：http://naayt.github.io/starting_point/

function whichTransitionEvent() { 
    var t, 
     el   = document.createElement('fakeelement'), 
     transitions = { 
     'transition':'transitionend', 
     'OTransition':'oTransitionEnd', 
     'MozTransition':'transitionend', 
     'WebkitTransition':'webkitTransitionEnd' 
    }; 

    for (t in transitions){ 
    if (el.style[t] !== undefined){ 
     return transitions[t]; 
    } 
    } 
} 

function backToTop() { 
    var pos_from_top = window.scrollY, 
     transitionend = whichTransitionEvent(), 
     body   = document.querySelector("body"); 

    function scrollEndHandler() { 
    window.scrollTo(0, 0); 
    body.removeAttribute("style"); 
    body.removeEventListener(transitionend, scrollEndHandler); 
    } 

    body.style.overflowY = "scroll"; 
    window.scrollTop = 0; 

    body.style.webkitTransition = 'all .5s ease'; 
    body.style.transition = 'all .5s ease'; 

    body.style.webkitTransform = "translateY(" + pos_from_top + "px)"; 
    body.style.transform = "translateY(" + pos_from_top + "px)"; 

    transitionend && body.addEventListener(transitionend, scrollEndHandler); 
} 

Answer 5

這是一個非常簡單的.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