页面中的‘返回顶部’（位置固定，指定位置显示/隐藏）

在页面中经常需要使用到返回顶部按钮，如果页面内容过多过长，手动滑动滚动条比较麻烦，所以一般会出现返回顶部按钮，一键回到顶部。本文实现的返回顶部的效果，将按钮在滚动条指定高度出现，并固定的页面指定位置。显示为一张图片，鼠标放上显示的是返回顶部文字提示。实现国程如下：

1.在html文件中：

<div id="return-top" class="top_e">
  <img src="/static/img/totop.png" width="60" id="img" >
    <div style="width:60px;margin:auto;">
        <p id='font' style="font-size:20px;margin-left:10px;display:none;">返回<br>顶部</p>
    </div>
</div>

这里外面的div作为返回顶部的外层。

内部有两部分：

第一部分是一张图片，从阿里矢量图片库中下载好的矢量图片，如图：

totop.png

当然也可以根据自己的需要，选择其他样式和颜色。

第二部分是’返回顶部‘四个字，这里需要换行，所以加了
标签。

2.css样式代码：

   <style type="text/css">
        
       .top_e{
            position:fixed;right:10px;bottom:40px;
            background:rgba(204,200,255,0.6);
            border-radius:15px;
            cursor:pointer;
            display:none;
            width:60px;
            height:60px;
            }
       .top_e:hover
       {
         color:white;
         background:#1296DB;
       }
    </style>

上面代码实现了对返回顶部按钮样式的控制，其中position是固定按钮的位置。
当然你也可以根据自己的需要进行调整。

3.js代码：控制按钮的显示和消失，也实现了图片和文件的动态转换。

// 控制按钮的显示和消失
 $(window).scroll(function(){
            if($(window).scrollTop()>300){
                $('#return-top').fadeIn(300);
                }
             else{$('#return-top').fadeOut(200);}
                 })


// 点击按钮，使得页面返回顶部
$("#return-top").click(function(){
scrollTo(0,0);
});
// 鼠标悬浮按钮之上，图片消失，文字显示
$(".top_e").mouseover(function(){
    $("#img").hide();
    $("#font").show();
})
//鼠标离开，文字消失，图片显示。
$(".top_e").mouseout(function(){
    $("#font").hide();
    $("#img").show();
})

显示返回顶部按钮

鼠标悬浮于上，显示文字提示

微信图片_20180518094259.png