标签：maximum dev -- fun ble animate ref mat sele
锚点： 可以让页面定位到某个位置上的点
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.anchor_point{
height: 800px;
width: 100%;
background: aqua;
}
</style>
</head>
<body>
<!-- a标签 href属性中写 要跳转div的id
点击锚点之后浏览器的URL会发生变化 页面会有刷新感-->
<a href="#jump1"> 跳到锚点</a>
<div class="anchor_point" id="jump1">锚点</div>
<!-- animate动画滚动效果 -->
<div class="content">
<div id="jump2">跳跳跳</div>
</div>
<!-- Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。
页面一定要能滚动，这个方法才会生效
-->
<div id="jump3">跳啊跳</div>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(‘.content‘).click(function(){
$("html, body").animate({
scrollTop: $("#jump1").offset().top
},500);
});
$(‘#jump3‘).click(function(){
document.querySelector("#jump1").scrollIntoView(); //无滚动效果
document.querySelector("#jump1").scrollIntoView({ //以平滑的滚动方式滚动
block: ‘start‘,
behavior: ‘smooth‘ //定义缓动动画 "auto", "instant", 或 "smooth" 默认 "auto"。
})
})
</script>
</body>
</html>
标签：maximum dev -- fun ble animate ref mat sele
原文地址：https://www.cnblogs.com/hungryC/p/13208714.html
