js 控制滚动条位置，实现锚点效果

最新推荐文章于 2024-07-20 13:48:02 发布

原创最新推荐文章于 2024-07-20 13:48:02 发布 · 756 阅读

0 ·

CC 4.0 BY-SA版权

web 同时被 3 个专栏收录

29 篇文章

订阅专栏

笔记

25 篇文章

订阅专栏

html

8 篇文章

订阅专栏

这篇博客探讨了如何使用JavaScript进行DOM元素操作，包括通过`getElementById`获取元素以及设置样式。文章展示了两个示例，一个是点击`test`元素时，使页面滚动到`a`元素的位置；另一个则是点击`scroll`链接时，页面滚动到`test`元素。内容涉及到事件处理、坐标计算以及页面滚动行为。

 <div
          id="test"
          style={{ backgroundColor: 'red' }}
          onClick={() => {
             let test = document.getElementById('a');
            document.body.scrollTop = test?.getBoundingClientRect()?.top||0;
           }}
        >
          test
        </div>

<a
          id="a"
          onClick={() => {
            let test = document.getElementById('test');
            document.body.scrollTop = test?.getBoundingClientRect()?.top || 0;
          }}
        >
          scroll
        </a>