本篇教程介绍了HTML+CSS入门 页面内跳转到相应位置的3种方法,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
首先设置所需的css和html
设置css
.demo{
width: 200px;
height: 200px;
border: 1px red solid;
margin-bottom: 100px;
margin-right: 50px;
}
.btn{
position: fixed;
right: 0;
top: 20px;
background-color: #0000cc;
color: #ffffff;
}
设置html
重点来了
1.第一种方法直接在html中添加
跳到id为demo的DIV
使用a标签跳转到相应id的位置
2.第二种方法先在html中添加
再添加js代码
function onTopClick() {
window.location.hash = "#domo";
}
由于btn没有herf跳转功能,这里我们用hash(锚链接)跳到当前页面的位置
3.第三种方法先在html中添加
到指定滚动高度
再添加js代码
$(document).on('click',$('.btn'),function(){
$(window).scrollTop($('#demo').offset().top)
})
这里我是通过先得到id为demo的div距离文档顶部的距离,再使页面滚动到这个高度来达到目的。
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!