平滑滾動到特定的點擊點擊

Question

我想要做的是讓它如此，如果你點擊一個按鈕，它會向下滾動（平滑）到頁面上的特定div。

我已經開始了一個的jsfiddle這裏：http://jsfiddle.net/ryXFt/2/

我需要的是，如果你按一下按鈕，它流暢的滾動到div「第二」。

HTML：

<div class="first"><button type="button">Click Me!</button></div> 
<div class="second">Hi</div> 

CSS：

.first { 
    width: 100%; 
    height: 1000px; 
    background: #ccc; 
} 

.second { 
    width: 100%; 
    height: 1000px; 
    background: #999; 
} 

請幫助。

Answer 1

做：

$("button").click(function() { 
    $('html,body').animate({ 
     scrollTop: $(".second").offset().top}, 
     'slow'); 
}); 

Jsfiddle更新

Answer 2

有使用JS庫如jQuery，Mootools的，原型等

下面的例子是關於純JavaScript平滑滾動的許多例子。如果你在頁面上沒有jQuery/Mootools/Prototype，或者你不想用重JS庫來重載頁面，那麼這個例子會有幫助。

http://jsfiddle.net/rjSfP/

HTML部分：

<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))">Click Me!</button></div> 
<div class="second" id="second">Hi</div> 

CSS部分：

.first { 
    width: 100%; 
    height: 1000px; 
    background: #ccc; 
} 

.second { 
    width: 100%; 
    height: 1000px; 
    background: #999; 
} 

JS部分：

window.smoothScroll = function(target) { 
    var scrollContainer = target; 
    do { //find scroll container 
     scrollContainer = scrollContainer.parentNode; 
     if (!scrollContainer) return; 
     scrollContainer.scrollTop += 1; 
    } while (scrollContainer.scrollTop == 0); 

    var targetY = 0; 
    do { //find the top of target relatively to the container 
     if (target == scrollContainer) break; 
     targetY += target.offsetTop; 
    } while (target = target.offsetParent); 

    scroll = function(c, a, b, i) { 
     i++; if (i > 30) return; 
     c.scrollTop = a + (b - a)/30 * i; 
     setTimeout(function(){ scroll(c, a, b, i); }, 20); 
    } 
    // start scrolling 
    scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0); 
} 

Answer 3

我與尼科的發揮各地回答一點，它感到跳動。做了一些調查，發現window.requestAnimationFrame這是在每個重繪週期中調用的函數。這允許更清晰的動畫。仍然試圖磨合步長的良好默認值，但對於我的例子來說，使用這個實現看起來很不錯。

var smoothScroll = function(elementId) { 
    var MIN_PIXELS_PER_STEP = 16; 
    var MAX_SCROLL_STEPS = 30; 
    var target = document.getElementById(elementId); 
    var scrollContainer = target; 
    do { 
     scrollContainer = scrollContainer.parentNode; 
     if (!scrollContainer) return; 
     scrollContainer.scrollTop += 1; 
    } while (scrollContainer.scrollTop == 0); 

    var targetY = 0; 
    do { 
     if (target == scrollContainer) break; 
     targetY += target.offsetTop; 
    } while (target = target.offsetParent); 

    var pixelsPerStep = Math.max(MIN_PIXELS_PER_STEP, 
           (targetY - scrollContainer.scrollTop)/MAX_SCROLL_STEPS); 

    var stepFunc = function() { 
     scrollContainer.scrollTop = 
      Math.min(targetY, pixelsPerStep + scrollContainer.scrollTop); 

     if (scrollContainer.scrollTop >= targetY) { 
      return; 
     } 

     window.requestAnimationFrame(stepFunc); 
    }; 

    window.requestAnimationFrame(stepFunc); 
}