Flick to a specific div on click

Question

I'm trying to make sure that if you click the button, it scrolls down (smoothly) to a specific element on the page.

What do I need if you click on the button, it smoothly scrolls to the div "second".

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

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

Answer 1

do:

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

Updated Jsfiddle

Answer 2

There are many examples of smooth scrolling using JS libraries such as jQuery, Mootools, Prototype, etc.

The following example is presented in pure JavaScript. If you do not have jQuery / Mootools / Prototype on the page or you do not want to overload the page with heavy JS libraries, this example will help.

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 part:

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

JS Part:

 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

I played a little with nico and he felt nervous. I examined a bit and found window.requestAnimationFrame , which is a function that is called for each repainting cycle. This allows for a cleaner animation. Still trying to hone good defaults for step size, but for my example, everything looks pretty good using this implementation.

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

Answer 4

I took the version of Ned Roxon and set it up so that it also allowed to scroll up.

 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, Math.abs(targetY - scrollContainer.scrollTop) / MAX_SCROLL_STEPS); var isUp = targetY < scrollContainer.scrollTop; var stepFunc = function() { if (isUp) { scrollContainer.scrollTop = Math.max(targetY, scrollContainer.scrollTop - pixelsPerStep); if (scrollContainer.scrollTop <= targetY) { return; } } else { scrollContainer.scrollTop = Math.min(targetY, scrollContainer.scrollTop + pixelsPerStep); if (scrollContainer.scrollTop >= targetY) { return; } } window.requestAnimationFrame(stepFunc); }; window.requestAnimationFrame(stepFunc); };