平滑滚动到特定div点击
我想要做的是这样做，如果你点击一个button，它向下滚动（顺利）到页面上的特定div。
我已经在这里创build了一个JSFiddle： http : //jsfiddle.net/ryXFt/2/
我需要的是，如果你点击button，顺利滚动到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; }
请帮忙。
做：
$("button").click(function() { $('html,body').animate({ scrollTop: $(".second").offset().top}, 'slow'); });
更新了Jsfiddle
有很多使用jQuery库，Mootools，Prototype等JS库进行平滑滚动的例子。
下面的例子是纯JavaScript的。 如果你在页面上没有jQuery / Mootools / Prototype，或者你不想用重JS库重载页面，那么这个例子会有帮助。
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); }
我用尼科的答案打了一小会儿，感觉很</s> </s>。 做了一些调查，发现window.requestAnimationFrame是每个重绘周期调用的函数。 这允许一个更清晰的animation。 仍然试图磨合步骤大小的良好的默认值，但对我的例子来看，使用这个实现的东西很不错。
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); }
你可以试试这个插件
虽然， 这一个更方便用户。 你几乎只需要链接标题中的JS文件，并适当地改变你的标记，以使其工作。
