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

来源：互联网发布：淘宝投诉制作原图编辑：程序博客网时间：2024/05/14 03:26

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

首先，在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();}});

最后效果图如下:

0 0