jquery 返回顶部 兼容web移动

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery 返回顶部 兼容web移动相关的知识,希望对你有一定的参考价值。

 返回顶部图片

http://hovertree.com/texiao/mobile/6/tophovertree.gif

具体实现代码

<span id="tophovertree" title="返回顶部"></span>
<style type="text/css">
    #tophovertree{display:block;position:fixed;width:36px;height:36px;right:20px;bottom:20px;cursor:pointer;background-image:url(images/newVersion201608/tophovertree.gif);opacity:0.9;display:none}
</style>
<script type="text/javascript">

    $(function () { initTopHoverTree("tophov"+"ertree",500,30,20); });

  /*  使用方法:initTopHoverTree("tophovertree",500,30,20); }
    tophovertree是返回顶部按钮的ID,500是返回顶部时间(毫秒),30是距离右边距离,20是距离底部距离*/

    function initTopHoverTree(hvtid, times, right, bottom) {

        $("#" + hvtid).css("right", right).css("bottmo", bottom);
        $("#" + hvtid).on("click", function () { goTopHovetree(times); })

        $(window).scroll(function () {
            if ($(window).scrollTop() > 268) {
                $("#" + hvtid).fadeIn(100);
            }
            else {
                $("#" + hvtid).fadeOut(100);
            }
        });
    }

    //返回顶部动画
    //goTop(500);//500ms内滚回顶部
    function goTopHovetree(times) {
        if (!!!times) {
            $(window).scrollTop(0);
            return;
        }

        var sh = $(‘body‘).scrollTop();//移动总距离
        var inter = 13.333;//ms,每次移动间隔时间
        var forCount = Math.ceil(times / inter);//移动次数
        var stepL = Math.ceil(sh / forCount);//移动步长
        var timeId = null;
        function aniHovertree() {
            !!timeId && clearTimeout(timeId);
            timeId = null;
            //console.log($(‘body‘).scrollTop());
            if ($(‘body‘).scrollTop() <= 0 || forCount <= 0) {//移动端判断次数好些,因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况
                $(‘body‘).scrollTop(0);
                return;
            }
            forCount--;
            sh -= stepL;
            $(‘body‘).scrollTop(sh);
            timeId = setTimeout(function () { aniHovertree(); }, inter);
        }
        aniHovertree();
    }

</script>

  

 

以上是关于jquery 返回顶部 兼容web移动的主要内容,如果未能解决你的问题,请参考以下文章

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

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

怎样用js写返回顶部的滑动效果

jQuery 一句代码返回顶部

为啥网站在手机端加载加载完成会跳回顶部?

人人必知的10个jQuery小技巧