動畫JavaScript滾動

Question

我有一個下一個按鈕，點擊時，我希望它向下滾動頁面517px。

使用下面的代碼（我已經在另一個網站上找到）我已經做了一個按鈕，但我希​​望它以平滑的動畫方式滾動。我需要添加什麼來做到這一點？

我使用的代碼是如下：

function scrollByPixels(x, y) 
{ 
    window.scrollBy(x, y); 
} 

，並在實際的按鈕執行以下操作：提前

onclick="javascript:scrollByPixels(0, 517)" 

感謝

Answer 1

function scrollByPixels(x, y) { 
    $('html,body').stop().animate({ 
    scrollLeft: '+=' + x, 
    scrollTop: '+=' + y 
    }); 
} 

...或作爲一個簡單的插件：

$.fn.scrollBy = function(x, y){ 
    return this.animate({ 
     scrollLeft: '+=' + x, 
     scrollTop: '+=' + y 
    }); 
}; 

demo

Answer 2

要滾動整個窗口：

var value = $("#scrollToHere").offset().top; 

$('html, body').animate({ 
     scrollTop: value 
    }, 800); 

來源： http://blog.alaabadran.com/2009/03/26/scroll-window-smoothly-in-jquery/

Answer 3

如果你發現自己在這裏是因爲你正在尋找一個強大的，但jQuery-解決方案更少你可以從這裏開始;

original Stackoverflow question and answer here

scrollByAnimated = function(scrollY, duration){ 
    //gist here https://gist.github.com/loadedsith/857540fd76fe9c0609c7 
    var startTime = new Date().getTime(); 

    var startY = window.scrollY; 
    var endY = startY + scrollY; 
    var currentY = startY; 
    var directionY = scrollY > 0 ? 'down' : 'up'; 

    var animationComplete; 
    var count = 0; 

    var animationId; 

    if(duration === undefined){ 
    duration = 250;//ms 
    } 

    //grab scroll events from the browser 
    var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x 

    //stop the current animation if its still going on an input from the user 
    var cancelAnimation = function() { 
    if(animationId!==undefined){ 
     window.cancelAnimationFrame(animationId) 
     animationId=undefined; 
    } 

    } 

    if (document.attachEvent) { 
    //if IE (and Opera depending on user setting) 
    document.attachEvent("on"+mousewheelevt, cancelAnimation) 
    } else if (document.addEventListener) { 
    //WC3 browsers 
    document.addEventListener(mousewheelevt, cancelAnimation, false) 
    } 

    var step = function (a,b,c) { 
    var now = new Date().getTime(); 
    var completeness = (now - startTime)/duration; 
    window.scrollTo(0, Math.round(startY + completeness * scrollY)); 
    currentY = window.scrollY; 
    if(directionY === 'up') { 
     if (currentY === 0){ 
     animationComplete = true; 
     }else{ 
     animationComplete = currentY<=endY; 
     } 
    } 
    if(directionY === 'down') { 
     /*limitY is cross browser, we want the largest of these values*/ 
     var limitY = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight); 
     if(currentY + window.innerHeight === limitY){ 
     animationComplete = true; 
     }else{ 
     animationComplete = currentY>=endY; 
     } 
    } 

    if(animationComplete===true){ 
     /*Stop animation*/ 
     return; 
    }else{ 
     /*repeat animation*/ 
     if(count > 500){ 
     return; 
     }else{ 
     count++; 
     animationId = window.requestAnimationFrame(step); 
     } 

    } 
    }; 
    /*start animation*/ 
    step(); 
}; 

scrollByAnimated(100, 250);// change in scroll Y, duration in ms