我想让浏览器通过使用JavaScript将页面滚动到给定的锚点。
我已经在HTML代码中指定了一个名称或id属性:
<a name="anchorName">..</a>
or
<h1 id="anchorName2">..</h1>
我希望获得与您通过导航到http://server.com/path#anchorName所获得的相同效果。应该滚动页面，使锚点靠近页面可见部分的顶部。
当前回答
function scrollTo(hash) {
location.hash = "#" + hash;
}
根本不需要jQuery !
其他回答
2018-2020纯JavaScript:
有一个非常方便的方法来滚动到元素:
el.scrollIntoView({
behavior: 'smooth', // smooth scroll
block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})
但据我了解，它并没有下面的选项那么好的支持。
了解更多关于该方法的信息。
如果元素必须在顶部:
const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset
window.scrollTo({
top: topPos, // scroll so that the element is at the top of the view
behavior: 'smooth' // smooth scroll
})
CodePen上的演示示例
如果你想让元素在中间:
const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
window.scroll({
top: rect.top + rect.height / 2 - viewHeight / 2,
behavior: 'smooth' // smooth scroll
});
CodePen上的演示示例
支持:
他们写道，scroll是与scrollTo相同的方法，但在scrollTo中支持更好。
关于方法的更多信息。
这是一个没有jQuery的纯JavaScript解决方案。它在Chrome和ie浏览器上进行了测试，但没有在iOS上进行测试。
function ScrollTo(name) {
ScrollToResolver(document.getElementById(name));
}
function ScrollToResolver(elem) {
var jump = parseInt(elem.getBoundingClientRect().top * .2);
document.body.scrollTop += jump;
document.documentElement.scrollTop += jump;
if (!elem.lastjump || elem.lastjump > Math.abs(jump)) {
elem.lastjump = Math.abs(jump);
setTimeout(function() { ScrollToResolver(elem);}, "100");
} else {
elem.lastjump = null;
}
}
演示:https://jsfiddle.net/jd7q25hg/12/
大多数答案都不必要地复杂。
如果你只想跳转到目标元素，你不需要JavaScript:
# the link:
<a href="#target">Click here to jump.</a>
# target element:
<div id="target">Any kind of element.</div>
如果你想动画地滚动到目标，请参考5hahiL的答案。
function scrollTo(hash) {
location.hash = "#" + hash;
}
根本不需要jQuery !
平稳滚动到适当的位置
得到正确的y坐标并使用window。scrollTo({top: y，行为:'平滑'})
const id = 'anchorName2';
const yourElement = document.getElementById(id);
const y = yourElement.getBoundingClientRect().top + window.pageYOffset;
window.scrollTo({top: y, behavior: 'smooth'});
