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

mac2025-03-26  19

实现:点击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>

 

说明:其实这就是加锚点

 

 

 

最新回复(0)