平滑滚动到特定的点击 div

小开

最佳答案

做:

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

更新 Jsfiddle

小开

有很多使用 JS 库的平滑滚动的例子，比如 jQuery、 Mootools、 Prototype 等等。

下面的示例是关于纯 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 Part:

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

小开

I played around with nico's answer a little and it felt jumpy. Did a bit of investigation and found window.requestAnimationFrame which is a function that is called on each repaint cycle. This allows for a more clean-looking animation. Still trying to hone in on good default values for step size but for my example things look 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);
}

小开

I took the Ned Rockson's version and adjusted it to allow upwards scrolls as well.

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

小开

如果使用 scrollIntoView 函数会怎样？

var elmntToView = document.getElementById("sectionId");
elmntToView.scrollIntoView();

有{行为: “光滑”}太... ... ;) https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

小开

你可以使用基本的 css 来实现平滑的滚动

html {
scroll-behavior: smooth;
}

小开

Ned Rockson 基本上回答了这个问题。然而，他的解决方案有一个致命的缺陷。当目标元素比 viewport-height 更靠近页面底部时，函数不会到达它的 exit 语句，并将用户困在页面底部。通过限制迭代次数可以简单地解决这个问题。

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 iterations = 0;
var stepFunc = function() {
if(iterations > MAX_SCROLL_STEPS){
return;
}
scrollContainer.scrollTop =
Math.min(targetY, pixelsPerStep + scrollContainer.scrollTop);


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


window.requestAnimationFrame(stepFunc);
};


window.requestAnimationFrame(stepFunc);
}

小开

对我有效的解决办法是:

var element = document.getElementById("box");


element.scrollIntoView({behavior: "smooth"});

您可以探索更多选项给你