zoukankan      html  css  js  c++  java
  • 页面中的"返回顶部"(位置固定,指定位置显示/隐藏) Label:博客园美化

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

    在html文件中:

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

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

    内部有两部分:

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

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

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

    css样式代码

    .top_e{
        position:fixed;right:10px;bottom:40px;
        background:rgba(204,200,255,0.6);
        border-radius:15px;
        cursor:pointer;
        display:none;
        60px;
        height:60px;
    }
    .top_e:hover{
        color:white;
        background:#1296DB;
    }
    

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

    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();
    })

    JS实现滚动条滚到页面距离底部300PX时执行事件的方法

    scrollTop为滚动条在Y轴上的滚动距离。
    clientHeight为内容可视区域的高度。
    scrollHeight为内容可视区域的高度加上溢出(滚动)的距离

    $(window).scroll(function(){
      var scrollTop = $(this).scrollTop();
      var scrollHeight = $(document).height();
      var windowHeight = $(this).height();
      if(scrollHeight-scrollTop-windowHeight <=300){
    //当滚动条滚动到距离底部还有300px的时候加载类容
      }else{
    //当滚动条滚动到距离底部大于300px的时候加载类容
    }
    });
    

    效果演示

    显示返回顶部按钮

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

    看到本文右侧的点赞和踩了吗,当他滚动到页面底部的时候会自动隐藏,可以试一试

    参考链接:

    https://www.jianshu.com/p/22e184a74358

    https://www.cnblogs.com/yubuzsidy/p/5192112.html

  • 相关阅读:
    团队冲刺第二阶段2
    团队冲刺第二阶段1
    第十二周总结
    团队游戏
    三个和尚
    第十一周总结
    第十周总结
    调用摄像头拍照
    怎样从相册中选择照片?
    怎样插入并播放音频?
  • 原文地址:https://www.cnblogs.com/radiumlrb/p/11364744.html
Copyright © 2011-2022 走看看