js 点击按钮,定位到页面指定位置

最新推荐文章于 2023-06-15 09:57:52 发布

System.out.print

最新推荐文章于 2023-06-15 09:57:52 发布

阅读量7.2k

点赞数 2

分类专栏： html 文章标签： html js div

本文链接：https://blog.csdn.net/weixin_40841731/article/details/102853123

版权

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

实现：点击bb按钮，定位到a7div位置

1、第一种方式：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>aaa</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
</head>
 
<body>
    <button style="position: absolute;left: 50%;top: 20%;" id="bb">bb</button>
    <div id="a1" style="width: 100%;height: 500px;background-color: red"></div>
    <div id="a2" style="width: 100%;height: 500px;background-color: #92D050"></div>
    <div id="a3" style="width: 100%;height: 500px;background-color: #FD9727"></div>
    <div id="a4" style="width: 100%;height: 500px;background-color: #33B1FC"></div>
    <div id="a5" style="width: 100%;height: 500px;background-color: #3ACA31"></div>
    <div id="a6" style="width: 100%;height: 500px;background-color: #FC2A36"></div>
    <div id="a7" style="width: 100%;height: 500px;background-color: #999999"></div>
</body>
    
<script>
    var btn = document.getElementById('bb')
    btn.addEventListener('click',function(){
      document.getElementById("a7").scrollIntoView()
    },false);
</script>
</html>

2、第二种方式：

<script>
    var btn = document.getElementById('bb')
    btn.addEventListener('click',function(){
      location.href = "#a7";  
    },false);
</script>

3、第三种方式：

<script>
    var btn = document.getElementById('bb')
    btn.addEventListener('click',function(){
      document.querySelector("#7").scrollIntoView();  
    },false);
</script>

说明：其实这就是加锚点

System.out.print

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
js 点击按钮,定位到页面指定位置

实现：点击bb按钮，定位到a7div位置1、第一种方式：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>aaa</title> &...
复制链接

扫一扫

专栏目录