本文主要是介绍将元素定位到可视区域,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
来自这个老哥
https://blog.csdn.net/qzw752890913/article/details/106638431
<a>标签的href属性 + 任意标签的id属性 可以实现 锚点定位。
如果这个 任意标签 是<a>标签,那么 <a>标签的href属性 + <a>标签的name属性 也能实现 锚点定位。举例:
<body><div id="root"><div class="header">投资者关系 | 新闻及媒体资源<a href="#bottom" name="top">到底部去</a></div><div class="content"></div><div class="footer">加入我们 | 免责声明 | 版权公告 <a name="bottom" href="#top">回到顶部</a></div></div>
</body>
scrollIntoView到目标元素
目标元素调用scrollIntoView方法,如bottomElm.scrollIntoView()。
注意哈,这时地址栏里的url没有hash。<body><div id="root"><div class="head">投资者关系 | 新闻及媒体资源<span id="top">到底部去</span> </div><div class="content"></div><div class="foot">加入我们 | 免责声明 | 版权公告 <span id='bottom'>回到顶部</span></div></div><script>var topElm = document.querySelector('#top');var bottomElm = document.querySelector('#bottom');topElm.onclick = function(){bottomElm.scrollIntoView();}bottomElm.onclick = function(){topElm.scrollIntoView();}</script>
</body>
获取滚动区域元素
let tabBox = document.querySelector('.box');tabBox.scrollTop = 0;
这篇关于将元素定位到可视区域的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!