如何滚动HTML页面到给定的锚点?

我想让浏览器仅使用JavaScript即可将页面滚动到给定的锚点。

在HTML代码中指定了nameid属性:

 <a name="anchorName">..</a>

要么

 <h1 id="anchorName2">..</h1>

通过导航到,我希望获得与您相同的效果http://server.com/path#anchorName应滚动页面,使锚点位于页面可见部分的顶部附近。

Gil2020/04/03 12:09:48
function scrollTo(hash) {
    location.hash = "#" + hash;
}

完全不需要jQuery!

小宇宙2020/04/03 12:09:48

没有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/