Cuộn mượt mà đến div cụ thể khi nhấp vào

Question

Điều tôi đang cố gắng thực hiện là làm cho nó sao cho nếu bạn nhấp vào một nút, nó cuộn xuống (mượt mà) đến một div cụ thể trên trang.

Tôi đã bắt đầu một JSFiddle đây: http://jsfiddle.net/ryXFt/2/

Những gì tôi cần là nếu bạn nhấp vào nút, nó mịn cuộn để div 'thứ hai'.

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; 
} 

Xin vui lòng giúp.

Answer 1

làm:

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

Cập nhật Jsfiddle

Answer 2

Có rất nhiều ví dụ về di chuyển mượt mà sử dụng thư viện JS như jQuery, Mootools, Prototype vv

Ví dụ sau đây là trên tinh khiết JavaScript. Nếu bạn không có jQuery/Mootools/Prototype trên trang hoặc bạn không muốn quá tải trang với các thư viện JS nặng, ví dụ sẽ được trợ giúp.

http://jsfiddle.net/rjSfP/

HTML Part:

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

CSS Phần:

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

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

JS Phần:

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

tôi đã chơi xung quanh với của nico trả lời một chút và nó cảm thấy buồn rầu. Đã làm một chút điều tra và tìm thấy window.requestAnimationFrame là một chức năng được gọi là trên mỗi chu kỳ repaint. Điều này cho phép một hình ảnh động rõ ràng hơn. Vẫn cố gắng trau dồi các giá trị mặc định tốt cho kích thước bước nhưng đối với ví dụ của tôi, mọi thứ trông khá tốt bằng cách sử dụng triển khai này.

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); 
}