1861资源网:您身边、安全、高速、放心的专业下载站!
手机站 软件专题
1861资源网
热门搜索: 请搜索 软件: 相关信息 请输入 相关: 软件 软件 穿书后她与反派大佬相互娇养 抖音极速版2022最新版本v20.3.0 官方安卓版 错误

div点击按钮使页面定位滑动到指定位置

    我们经常要实现点击侧边栏菜单使页面滑动到指定的对应位置这一功能,今天来分享一下实现这个功能的两种方法。

    1.使用id实现定位。

    优点:简单便捷;缺点:无动画

    <div>
      <div>
        <a href="#A1">锚点1</a>
        <a href="#A2">锚点2</a>
      </div>
      <div id="A1">anchor1</div>
      <div id="A2>anchor2</div>
    </div>

    命名要点击的按钮链接为“#”+要跳转到位置元素的id即可实现。

    2.使用js实现定位

    在按钮位置添加οnclick="scrollToView()"

    <div onclick="scrollToView()"></div>

    之后添加scrollToView (),将id与要跳转到位置元素的id对应即可。

    <script type="text/javascript">
        function scrollToView () {
            document.getElementById('A1').scrollIntoView({
                block: 'start',
                inline: 'nearest',
                behavior: 'smooth'
            })
        }
    </script>
代码特效 发布: 2022-11-19   修改: 2022-12-06   阅:   评:   点击报错反馈
相关文章
本类最新发布
本类推荐
本类评论
留言与评论(共有 0 条评论)
验证码:
本类软件分类
文章总排行
文章月排行
装机必备软件
全站下载总排行

1861资源网

http://www.zywlyy.cn/

   |

1861资源网 软件下载

1861资源网

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢网络科技公司技术支持