jQuery实现返回顶部按钮功能

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery实现返回顶部按钮功能相关的知识,希望对你有一定的参考价值。

  • html结构
  • <div class="toolbar">
                <a href="javascript:;" class="toolbar-item">
                    <span class="toolbar-btn" id="backtop">
                        <i class="toolbar-icon icon-upload2"></i>  //图标字体
                        <span class="toolbar-text">返回<br />顶部</span>
                    </span>
                </a>
    </div>
  • css样式
  • .toolbar{
        position: fixed;
        right: 10px;
        bottom: 20px;
    }
    .toolbar-item{
        position: relative;
        display: block;
        width: 50px;
        height: 50px;
    
    
        &:hover{
            .toolbar-icon{
                top: [email protected];
            }
            .toolbar-text {
                top: 0;
            }
        }
    }
    .toolbar-btn{
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        overflow: hidden;
    
        .toolbar-icon{
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background-color: #ccc;
            font-size: 30px;
            color: #fff;
            text-align: center;
            transition: top 1s;
        } 
        .toolbar-text{
            position: absolute;
            left: 0;
            top: 50px;
            width: 50px;
            height:50px;
            background-color: #A0A0A0;
            font-size: 14px;
            color: #fff;
            text-align: center;
            transition: top 1s;
        }
    }
  • jQuery实现返回顶部
  • <script type="text/javascript">
            $(function() {
                $(‘#backtop‘).on(‘click‘,move);
                $(window).on(‘scroll‘,function(){
                    checkposition( $(window).height() );
                });
    
                function move() {
                    $(‘html,body‘).animate({
                        scrollTop: 0
                    },800);
                }
    
                function checkposition(H) {
                    if($(window).scrollTop() > H){
                        $(‘#backtop‘).fadeIn();
                    }
                    else{
                        $(‘#backtop‘).fadeOut();
                    }
                }
            })
    </script>

     

至此,返回顶部按钮功能基本实现

以上是关于jQuery实现返回顶部按钮功能的主要内容,如果未能解决你的问题,请参考以下文章

简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示

返回顶部功能的实现

几条jQuery代码片段助力Web开发效率提升

如何使用 React js 添加平滑滚动返回顶部按钮?

返回顶部按钮功能的实现

当按下返回按钮时,listview 会顶部。如何解决?