本篇教程介绍了HTML+CSS入门 页面内跳转到相应位置的3种方法,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
首先设置所需的css和html
设置css
.demo{
width:200px;
height:200px;
border:1pxredsolid;
margin-bottom:100px;
margin-right:50px;
}
.btn{
position:fixed;
right:0;
top:20px;
background-color:#0000cc;
color:#ffffff;
}
设置html
这个DIV,id是demo
重点来了
1.第一种方法直接在html中添加
跳到id为demo的DIV
使用a标签跳转到相应id的位置
2.第二种方法先在html中添加
再添加js代码
functiononTopClick(){
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知识!