html+css+jquery实现右下角返回顶部功能

最新推荐文章于 2024-02-01 16:58:38 发布

拾不到一片光

最新推荐文章于 2024-02-01 16:58:38 发布

阅读量2.2k

点赞数

分类专栏：页面效果文章标签： javascript jquery css html

本文链接：https://blog.csdn.net/qq_35017200/article/details/70194444

版权

页面效果专栏收录该内容

2 篇文章 0 订阅

订阅专栏

很多网站如果一个页面比较长的话，一般都会有一个返回顶部的按钮或者直接分页，每页显示多少条内容，今天我们就来谈谈怎么实现返回顶部这个小细节的功能实现

首先，在HTML中加上一个div:

		<div class="izl-rmenu">  
		    <a href="javascript:void(0)" class="btn_top" style="display: block;"></a>
		</div>

然后CSS中加上对应得图片：

/*return top*/
.izl-rmenu{
	       margin-right: 0;
	       width: 82px;    //设置div宽度
	       position: fixed;  //设置这个div的位置为fixed,让他固定在页面的某一处
	       right: 13.5%;  
	       top: 45%;
	       -webkit-box-shadow: #DDD 0px 1px 5px;  //加阴影
	       -moz-box-shadow: #DDD 0px 1px 5px;
	       box-shadow: #DDD 0px 1px 5px;
	       z-index:999;
}
.izl-rmenu .btn_top {
    background-image: url(../img/float_top.gif);  //放上一张返回顶部的图片
    background-repeat: no-repeat;
    background-position: center top;
    display: block;
    height: 39px;
    width: 82px;
    -webkit-transition: all 0s ease-in-out;
    -moz-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
}
.izl-rmenu .btn_top:hover {   //当鼠标放在图片上时换一张背景图
	background-image: url(../img/float_top.gif);
	background-repeat: no-repeat;
	background-position: center bottom;
}

最后，就是在js文件中设置这个返回顶部的显示，隐藏以及下滑页面时的出现，单击时返回顶部的功能，因为这里用到的是jQuery，所以在导入自己的js之前要加上

<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>

具体的js代码如下：

  $(".btn_top").hide();         //刚进入页面时设置为隐藏
	$(".btn_top").bind("click",function(){     //单击时返回顶部
		$('html, body').animate({scrollTop: 0},300);return false;
	});
	$(window).bind('scroll resize',function(){   //判断页面所在的位置，小于300就隐藏，否则就显示
		if($(window).scrollTop()<=300){
			$(".btn_top").hide();
		}else{
			$(".btn_top").show();
		}
});

最后效果图如下: