本文介绍了如何使用HTML和JavaScript实现页面内的跳转定位。通过`scrollTo()`和`scrollIntoView()`方法，可以平滑滚动到页面上的指定元素。文章提供了详细的代码示例，包括链接源和链接点的设置，以及不同方法的使用场景。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML跳转到页面指定位置</title>
<style>
body {
text-align: center;
}
hr {
width: auto;
margin-left: 20px;
}
/* 导航测试块_样式控制 */
.div_box div {
margin: 20px 20px;
width: auto;
height: 120px;
line-height: 120px;
font-size: 20px;
border-radius: 5.2px;
background-color: rgba(138, 172, 209, 0.534)
}
/* 链接源_样式控制 */
.div_box a div {
margin: 20px auto;
width: 52%;
height: 120px;
background-color: rgba(245, 155, 155, 0.597);
}
/* 链接源_效果样式 */
.div_box a div:hover {
box-shadow: 1.2px 1.2px 2px 2px rgba(149, 135, 135, 0.57);
}
/* 控制“返回顶部”按钮 */
#goTopBtn {
position: fixed;
bottom: 52px;
right: 20px;
line-height: 46px;
text-align: center;
width: 46px;
height: 46px;
/* 光标: 指针 */
cursor: pointer;
background-color: rgba(255, 255, 255, 0.214);
display: none;
border-radius: 6px;
box-shadow: 1.2px 1.2px 2px 0.52px rgba(22, 22, 22, 0.507);
font-size: 22px;
color: #999;
}
/*控制“返回顶部”按钮 */
#goTopBtn .glyphicon:hover {
text-shadow: 0.2px 0.2px 2px rgba(57, 57, 57, 0.434);
}
</style>
<style>
/* 链接点_样式控制 */
最低0.47元/天 解锁文章
扫一扫
2024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
