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

JavaScript HTML

飞云

2020-04-03

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

我在HTML代码中指定了name或id属性：

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

要么

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

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

第4004篇《如何滚动HTML页面到给定的锚点？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Gil 2020.04.03 
function scrollTo(hash) {
    location.hash = "#" + hash;
}

完全不需要jQuery！

小宇宙 2020.04.03

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android