我想让浏览器仅使用JavaScript即可将页面滚动到给定的锚点。
我在HTML代码中指定了name
或id
属性:
<a name="anchorName">..</a>
要么
<h1 id="anchorName2">..</h1>
通过导航到,我希望获得与您相同的效果http://server.com/path#anchorName
。应滚动页面,使锚点位于页面可见部分的顶部附近。
我想让浏览器仅使用JavaScript即可将页面滚动到给定的锚点。
我在HTML代码中指定了name
或id
属性:
<a name="anchorName">..</a>
要么
<h1 id="anchorName2">..</h1>
通过导航到,我希望获得与您相同的效果http://server.com/path#anchorName
。应滚动页面,使锚点位于页面可见部分的顶部附近。
没有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;
}
}
完全不需要jQuery!