漂亮的JQ“返回顶部” 按钮

最新推荐文章于 2025-05-04 12:55:46 发布

凉城古梦喵扑街

最新推荐文章于 2025-05-04 12:55:46 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 JavaScript

本文链接：https://blog.csdn.net/ssh159/article/details/52576992

前端同时被 2 个专栏收录

13 篇文章

订阅专栏

JavaScript

3 篇文章

订阅专栏

模拟一下 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>