摘要:本篇教程介绍了HTML+CSS入门 页面内跳转到相应位置的3种方法,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
本篇教程介绍了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
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo" id="demo">这个DIV,id是demo</div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
重点来了
1.第一种方法直接在html中添加
<!--1.使用a标签跳转到对应id的位置-->
<a href="#demo">跳到id为demo的DIV</a>
使用a标签跳转到相应id的位置
2.第二种方法先在html中添加
<!--2.通过btn的window.location.hash 跳转到对应位置-->
<input type="button" value="跳到id为demo的DIV" onclick="javascript:onTopClick();" />
再添加js代码
function onTopClick() {
window.location.hash = "#domo";
}
由于btn没有herf跳转功能,这里我们用hash(锚链接)跳到当前页面的位置
3.第三种方法先在html中添加
<button class="btn"> 到指定滚动高度</button>
再添加js代码
$(document).on('click',$('.btn'),function(){
$(window).scrollTop($('#demo').offset().top)
})
这里我是通过先得到id为demo的div距离文档顶部的距离,再使页面滚动到这个高度来达到目的。
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-IT技术咨询与就业发展一体化服务 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号