将元素定位到可视区域

只会cv的小前端

已于 2022-07-13 17:08:57 修改

阅读量410

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-06-07 10:59:50 首次发布

本文链接：https://blog.csdn.net/Wancc123/article/details/125161279

版权

JavaScript 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

来自这个老哥
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;

只会cv的小前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
将元素定位到可视区域

将元素定位到可视区域
复制链接

扫一扫

专栏目录

将元素定位到可视区域

“相关推荐”对你有帮助么？