<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.jump-group {
display: flex;
text-align: center;
}
.jump {
cursor: pointer;
flex: 1;
}
.content {
margin: 20px auto;
height: 500px;
width: 80%;
}
#content1 {
background-color: #2ab27b;
}
#content2 {
background-color: #6b9dbb;
}
#content3 {
background-color: #b6a338;
}
#content4 {
background-color: #c7254e;
}
</style>
<body>
<div class="jump-group">
<div class="jump" j-to="content1">跳跳1</div>
<div class="jump" j-to="content2">跳跳2</div>
<div class="jump" j-to="content3">跳跳3</div>
<div class="jump" j-to="content4">跳跳4</div>
</div>
<div class="content" id="content1"></div>
<div class="content" id="content2"></div>
<div class="content" id="content3"></div>
<div class="content" id="content4"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('.jump').click(function () {
//通過點擊元素獲取目標元素的id值
var target = $(this).attr('j-to');
//獲取目標元素距離屏幕頂部的高度
var target_roll_height = $('#' + target).offset().top;
//滾動
$("html,body").animate({scrollTop: target_roll_height}, 100);
})
</script>
</html>
