模拟一下 B站 返回顶部 的按钮。
1、制作返回顶部 按钮。
2、控制在滚动条滑动超过800px时候,显示 “返回顶部”按钮,否则隐藏
3、鼠标事件,经过变色,离开恢复
4、bootstrap插件样式
第一张是 没有出现的 “返回顶部的”。
第二张滑动超过 800px 出现按钮。点击,一秒内返回顶部。(华丽的按钮)
一、准备的插件。
首先去 http://v3.bootcss.com/ 下载插件,
很小,几M而已。 http://v3.bootcss.com/components/ 这里我们可以看到漂亮的 图案 。这个是我们需要的。
除了bootcss插件,我们还需要JQuery.js 插件,任何版本都可以。(这里名字不要那么长,一点几就删除了。)
我们需要:1、css: bootstrap.css ; 2、fonts 这个文件夹的图案 ; 3、image图片 4、js:jquery.js
二、代码:
<span style="font-size:18px;"><html>
<head>
<title>冰 菓</title>
<link href="css/cartoon.css" rel="stylesheet"/>
<link type="text/css" href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<style>
#btn1{font-size:28px; color: #00A1D6;background-color: #F6F9FA;}
button{width:50px; height:50px;
color:#F6F9FA; font-size:18px;
background-color: #00A1D6;cursor:pointer;}
.dingbu2{
border:solid 1px #00A1D6;
position:fixed; /*位置:固定*/
top:230px; /*设定广告栏2 */
width:50px; height:300px;
float:right; right:50px;
text-align:center;
margin:5px 5px;
-webkit-border-radius:3px;
background-color: #00A1D6;
}
.dingbu2{height:50px;width:50px;top:450px; display:none;}
</style>
</head>
<body style="text-align: center;">
<h2>冰菓</h2>
<img src="image/1.jpg"/>
<br>
<div id="pinglun">
<span style="float: left"> <b> 评论区 </b> </span>
</div>
<div class="dingbu2">
<button id="btn1" class="glyphicon glyphicon-chevron-up"></button>
</div>
<script>
$(".dingbu2").mouseover(function(){
$("#btn1").css("background-color","#00A1D6"); //蓝色
$("#btn1").css("color","#F6F9FA"); //白色
});
$(".dingbu2").mouseout(function(){
$("#btn1").css("background-color","#F6F9FA");
$("#btn1").css("color","#00A1D6");
});
</script>
<!-- 返回顶部 -->
<script>
$(function () {
//绑定滚动条事件
$(window).bind("scroll", function () {
var sTop = $(window).scrollTop();
var sTop = parseInt(sTop);
if(sTop>=800){
$(".dingbu2").show();
}else{
$(".dingbu2").hide();
}
});
<!-- 单机返回顶部 -->
$(".dingbu2").click(function(){
$("body").animate({scrollTop:0},1000);
});
})
</script>
</body>
</html></span>
如果要简单返回顶部的话,还有:
<span style="font-size:18px;">window.onscroll = function () {
var top = document.documentElement.scrollTop || document.body.scrollTop;
var back_btn = document.getElementsByClassName('dingbu2
')[0];
if(top>800){
back_btn.style.display = 'block';
}else{
back_btn.style.display = 'none';
}
}</span>