移动端 回到顶部按钮特效

html部分

<div class="gotop"></div>
.gotop{position: fixed;width: 1rem;height: 1rem;z-index: 200;right: .3rem;bottom: 1.5rem;overflow: hidden;}

脚本部分

   // 回到顶部
    $('.gotop').click(function(){
        var dealTop = $("body").offset().top;
        $("html,body").scrollTo({toT:dealTop})

    });
    //平滑的回到顶部
    $.fn.scrollTo =function(options){
        var defaults = {
            toT : 0, //滚动目标位置
            durTime : 500, //过渡动画时间
            delay : 30, //定时器时间
            callback:null //回调函数
        };
        var opts = $.extend(defaults,options),
            timer = null,
            _this = this,
            curTop = _this.scrollTop(),//滚动条当前的位置
            subTop = opts.toT - curTop, //滚动条目标位置和当前位置的差值
            index = 0,
            dur = Math.round(opts.durTime / opts.delay),
            smoothScroll = function(t){
                index++;
                var per = Math.round(subTop/dur);
                if(index >= dur){
                    _this.scrollTop(t);
                    window.clearInterval(timer);
                    if(opts.callback && typeof opts.callback == 'function'){
                        opts.callback();
                    }
                    return;
                }else{
                    _this.scrollTop(curTop + index*per);
                }
            };
        timer = window.setInterval(function(){
            smoothScroll(opts.toT);
        }, opts.delay);
        return _this;
    };
    展现方式一：
    //向下滑动显示，向上滑动隐藏
       var windowTop=0;
    $(window).on("scroll", function(){
        var scrolls = $(window).scrollTop();//获取当前可视区域距离页面顶端的距离
        if(scrolls>=windowTop){//当B>A时，表示页面在向上滑动
            //需要执行的操作
            windowTop=scrolls;
            $('.gotop').hide();

        }else{//当B<a 表示手势往下滑动
            //需要执行的操作
            windowTop=scrolls;
            $('.gotop').show();
        }
        if(scrolls==0){
            $('.gotop').hide();
        }
    展示方式二：
    //根据距离显示回到顶部图标
	var h2_height = $(".searchbox").offset().top;//获取一个参考元素距离顶部距离
	$(window).scroll(function(){
	var this_scrollTop = $(this).scrollTop(); //获取当前可视区域距离页面顶端的距离
	if(this_scrollTop>h2_height ){
	$(".gotop").show();
	}else{
	$(".gotop").hide();
	}
	});

    });