jquery小火箭div回到顶部

一款个性化jQuery回到顶部的小火箭，可以让div的滚动条回到顶部，初始状态的小火箭是隐藏状态的，需要滚动条到一定高度后才能显示，这样的效果比较常用，喜欢的童鞋就收下吧。

分类：html/css > 按钮难易：入门级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分加了一个安卓和苹果的判断，来设置页面的宽高度自适应等，代码如下

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    document.write('<meta name="viewport" content="width=device-width, height=device-height; initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />');
} else if (/(Android)/i.test(navigator.userAgent)) {
    document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />');
}

接下来引入CSS样式和设置页面其他样式，代码如下：

<link type="text/css" rel="stylesheet" href="css/common.css">
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        background: #f5f5f5;
    }
    
    .body-cnt {
        width: 100%;
        height: 100%;
        max-width: 500px;
        margin: 0 auto;
        display: block;
        background: #ffffff;
    }
    
    .top-box {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #d5d5d5;
        line-height: 50px;
        height: 50px;
    }
    
    .list-box {
        width: 100%;
        overflow-y: auto;
    }
    
    .list-box ol {
        list-style-type: none;
        counter-reset: sectioncounter;
    }
    
    .list-box li.list-item:before {
        content: counter(sectioncounter) "、";
        counter-increment: sectioncounter;
    }
    
    .list-box li.list-item {
        color: #7f7c7c;
        font-size: 14px;
        line-height: 20px;
        padding: 4px 12px;
    }
    
    .go-top {
        position: fixed;
        right: 20px;
        bottom: 15px;
        width: 48px;
    }
    
    .go-top img {
        width: 100%;
    }
</style>

页面的body部分设置好内容的div容器，代码如下：

<div class="body-cnt">
    <div class="top-box">div回到顶部</div>

    <div class="list-box">
        <ol>           
            <li class="list-item">css：默认的checkbox、input、radio太丑了？我来教你改变使用纯css3改写的带动画的默认样式</li>
            <li class="list-item">完全掌握 Vuex 图文视频教程</li>
            <li class="list-item">vue 项目 blog 部署上线（前端实习求职）</li>
            <li class="list-item" style="padding-bottom: 300px">js 用 new 实例化对象与直接调用的 this 的区别</li>
            <li class="list-item">mongodb新手扫盲 - 动机在未来</li>
            <li class="list-item">高性能网站架构设计之缓存篇（1）- Redis C#客户端 - kuang</li>
            <li class="list-item">java线程总结3--synchronized关键字，原理以及相关的锁 - CoderLcp</li>
           <li class="list-item" style="padding-bottom: 300px">js 用 new 实例化对象与直接调用的 this 的区别</li>
           <li class="list-item">mongodb新手扫盲 - 动机在未来</li>
            <li class="list-item">高性能网站架构设计之缓存篇（1）- Redis C#客户端 - kuang</li>
            <li class="list-item">java线程总结3--synchronized关键字，原理以及相关的锁 - CoderLcp</li>
           <li class="list-item" style="padding-bottom: 300px">js 用 new 实例化对象与直接调用的 this 的区别</li>
           <li class="list-item">mongodb新手扫盲 - 动机在未来</li>
            <li class="list-item">高性能网站架构设计之缓存篇（1）- Redis C#客户端 - kuang</li>
            <li class="list-item">java线程总结3--synchronized关键字，原理以及相关的锁 - CoderLcp</li>
           <li class="list-item" style="padding-bottom: 300px">js 用 new 实例化对象与直接调用的 this 的区别</li>
           <li class="list-item">mongodb新手扫盲 - 动机在未来</li>
            <li class="list-item">高性能网站架构设计之缓存篇（1）- Redis C#客户端 - kuang</li>
            <li class="list-item">java线程总结3--synchronized关键字，原理以及相关的锁 - CoderLcp</li>
           <li class="list-item" style="padding-bottom: 300px">js 用 new 实例化对象与直接调用的 this 的区别</li>
           <li class="list-item">mongodb新手扫盲 - 动机在未来</li>
            <li class="list-item">高性能网站架构设计之缓存篇（1）- Redis C#客户端 - kuang</li>
            <li class="list-item">java线程总结3--synchronized关键字，原理以及相关的锁 - CoderLcp</li>
           <li class="list-item" style="padding-bottom: 300px">js 用 new 实例化对象与直接调用的 this 的区别</li>
        </ol>

        <div class="go-top"><img src="images/gotop.png" alt=""></div>
    </div>
</div>

页面底部引入jQuery库，并设置好返回顶部事件的调用方法等，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    /* 回到顶部 */
    $.fn.goTop = function(speed, dom) {
        var _this = this;
        _this.css({"position":"fixed","display":"none"});
        //var clientHeight = document.documentElement.clientHeight; //获取可视区域的高度
        var height_block = speed ? speed : 300; //将高度分成N段
        var thisFn = {
            onScroll: function() {
                //获取滚动条的滚动高度
                var osTop = '';
                if (dom) {
                    osTop = $(dom).scrollTop();
                } else {
                    osTop = document.documentElement.scrollTop || document.body.scrollTop;
                }
                var is_show = _this.css("display");
                if (osTop > 0) {
                    if (is_show == 'none') {
                        _this.fadeIn();
                    }
                }
                if (osTop == 0) {
                    _this.fadeOut();
                }
            },
            goTopFn: function() {
                //获取滚动条的滚动高度
                var osTop = '';
                //用于设置速度差，产生缓动的效果
                var speed = 0;

                if (dom) {
                    osTop = $(dom).scrollTop();
                    speed = Math.floor(-osTop * 10 / height_block);
                    $(dom).scrollTop(osTop + speed);
                } else {
                    osTop = document.documentElement.scrollTop || document.body.scrollTop;
                    speed = Math.floor(-osTop * 10 / height_block);
                    document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
                }

                var is_show = _this.css("display");
                if (osTop > 0) {
                    if (is_show == 'none') {
                        _this.fadeIn();
                    }
                    setTimeout(function() {
                        thisFn.goTopFn();
                    }, 1);
                }
            }
        };

        if (dom) {
            $(dom).on('scroll', function() {
                thisFn.onScroll();
            });
        } else {
            window.onscroll = function() {
                thisFn.onScroll();
            }
        }

        //回到顶部按钮点击事件
        $(".body-cnt .go-top").off();
        $(".body-cnt").on("click", ".go-top", function() {
            thisFn.goTopFn();
        });
    }

    $(function() {
        var _height = $(".body-cnt").height();
        var _top_h = $(".top-box").height();
        $(".list-box").height(_height - _top_h - 1);

        $(".go-top").goTop(500, ".list-box");
        /*$(".go-top").goTop();*/
    });
</script>