如何制作网页中回到顶部的悬浮按钮
2017-08-19 17:21
357 查看
html代码如下:
<div class="top">
<span title="Top" id="topArrow"></span>
</div>css:(添加一定的美化效果)
.top{
width: 50px;
height: 100px;
background-color: rgba(0,0,255,0.5);
border-radius: 10px;
position: fixed;
right: 100px;
bottom: 40%;
}
.top #topArrow{
width: 30px;
height: 30px;
border-top: 2px solid #fff;//利用border和rotate绘制向上的箭头
border-left: 2px solid #fff;
display: inline-block;
transform: translate(9px,35px) rotate(45deg);
cursor: pointer;
z-index: 1000;//避免被其他div遮盖
}
.top #topArrow:hover{
border-width: 4px;
}
js:
1)jQuery
$("#topArrow").click(function(){
$(document).scrollTop(0);
})
2)DOM
var topArrow=document.getElementById('topArrow');
topArrow.onclick=function(){
document.scrollTop = document.body.scrollTop =0;
}也可以通过scrollTop将页面移动到固定元素的位置,实现如下:
<img id="img1" src="public/images/bg.jpg">
<img id="img2" src="public/images/bg2.jpg">
<img id="img3" src="public/images/bg.jpg">
<div class="top">
<span title="Top" id="topArrow"></span>
</div>js代码:
var topArrow=document.getElementById('topArrow');
var img2=document.getElementById('img2');
topArrow.onclick=function(){
/*document.scrollTop = document.body.scrollTop =0;*/
var h=img2.offsetTop;
document.body.scrollTop=h;
}这里,同样点击箭头可以将页面跳转到第二张图片的位置,但是实际应用中一般将h设置小一点,如h-200,从而让跳转效果更明显。
<div class="top">
<span title="Top" id="topArrow"></span>
</div>css:(添加一定的美化效果)
.top{
width: 50px;
height: 100px;
background-color: rgba(0,0,255,0.5);
border-radius: 10px;
position: fixed;
right: 100px;
bottom: 40%;
}
.top #topArrow{
width: 30px;
height: 30px;
border-top: 2px solid #fff;//利用border和rotate绘制向上的箭头
border-left: 2px solid #fff;
display: inline-block;
transform: translate(9px,35px) rotate(45deg);
cursor: pointer;
z-index: 1000;//避免被其他div遮盖
}
.top #topArrow:hover{
border-width: 4px;
}
js:
1)jQuery
$("#topArrow").click(function(){
$(document).scrollTop(0);
})
2)DOM
var topArrow=document.getElementById('topArrow');
topArrow.onclick=function(){
document.scrollTop = document.body.scrollTop =0;
}也可以通过scrollTop将页面移动到固定元素的位置,实现如下:
<img id="img1" src="public/images/bg.jpg">
<img id="img2" src="public/images/bg2.jpg">
<img id="img3" src="public/images/bg.jpg">
<div class="top">
<span title="Top" id="topArrow"></span>
</div>js代码:
var topArrow=document.getElementById('topArrow');
var img2=document.getElementById('img2');
topArrow.onclick=function(){
/*document.scrollTop = document.body.scrollTop =0;*/
var h=img2.offsetTop;
document.body.scrollTop=h;
}这里,同样点击箭头可以将页面跳转到第二张图片的位置,但是实际应用中一般将h设置小一点,如h-200,从而让跳转效果更明显。
相关文章推荐
- 回到顶部按钮的制作
- 悬浮按钮点击回到顶部FloatingActionButton
- web网页按钮如何制作
- jQuery返回顶部特效,网页右下角的回到顶部按钮
- 如何为网页添加返回顶部按钮
- WZSZF飞鸽传书 如何实现网页悬浮按钮
- 如何制作好看的网页按钮
- 悬浮div设置回到顶部按钮
- 如何为自己的网页实现一个“回到顶部”的链接?
- 小程序制作回到顶部按钮
- 小程序制作回到顶部按钮
- Flex中如何给一个按钮添加链接,点击链接打开一个网页呢? - FLEX学习笔记
- 浅析在网页设计中如何让按钮激发用户点击欲望
- (译)在cocos2d里面如何制作按钮:简单按钮、单选按钮和开关按钮
- 网页嵌入swf, wmode必须设置为direct情况下如何让html元素悬浮于swf之上
- (转)回到顶部按钮
- 在cocos2d里面如何制作按钮:简单按钮、单选按钮和开关按钮
- Photoshop教程:制作质感3D网页按钮
- 回到网页顶部的document.body.scrollTop与document.documentElement.scrollTop兼容问题
- jquery回到页面顶部按钮